<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>词汇闪卡合集</title>
<style>
:root {
  --bg: #0f172a;
  --muted: #94a3b8;
}
body {
  margin: 0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, "PingFang SC", sans-serif;
  color: white;
  background: linear-gradient(135deg, #0f172a 0%, #1f2937 50%, #0f172a 100%);
}
.container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  min-height: 100vh;
}
aside {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 20px;
  background: rgba(17, 24, 39, 0.6);
  border-right: 1px solid rgba(148,163,184,0.2);
}
.main { padding: 20px 20px 80px; }
h1 { margin: 0 0 12px 0; font-size: 20px; }
.desc { color: var(--muted); font-size: 13px; line-height: 1.6; }
.search {
  margin-top: 12px; display: flex; gap: 8px;
}
.search input {
  flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.3);
  background: rgba(31,41,55,0.6); color: #e5e7eb;
}
.toc { margin-top: 12px; display: grid; gap: 8px; }
.toc-link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #e5e7eb;
  background: rgba(31, 41, 55, 0.7);
}
.section {
  background: rgba(17, 24, 39, 0.7);
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 16px;
  margin-bottom: 24px;
  overflow: hidden;
}
.section-header {
  display: flex; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(148,163,184,0.2);
  background: rgba(31,41,55,0.6);
}
.card-frame { width: 100%; height: 520px; border: 0; background: white; }
.card-frame.tall { height: 800px; }
@media (max-width: 900px) {
  .container { grid-template-columns: 1fr; }
  aside { position: static; height: auto; border-right: 0; }
}
.hidden { display: none !important; }
</style>
<script>
function toggleHeight(id) {
  const iframe = document.querySelector('#' + id + ' .card-frame');
  iframe.classList.toggle('tall');
}
function openStandalone(filename) {
  window.open(filename, '_blank');
}
function filterTOC(q) {
  q = q.trim().toLowerCase();
  const links = document.querySelectorAll('.toc a');
  links.forEach(a => {
    const show = a.textContent.toLowerCase().includes(q);
    a.style.display = show ? '' : 'none';
  });
  const secs = document.querySelectorAll('.section');
  secs.forEach(sec => {
    const title = sec.querySelector('h2').textContent.toLowerCase();
    sec.classList.toggle('hidden', q && !title.includes(q));
  });
}
</script>
</head>
<body>
<div class="container">
  <aside>
    <h1>词汇闪卡合集</h1>
    <div class="desc">按编号排序，每个话题独立显示，可搜索筛选。</div>
    <div class="search">
      <input placeholder="按标题搜索…" oninput="filterTOC(this.value)" />
    </div>
    <div class="toc">
      <a href="#1-家电" class="toc-link">1 家电</a><a href="#2-服装与装饰" class="toc-link">2 服装与装饰</a><a href="#3-颜色-Colours" class="toc-link">3 颜色 Colours</a><a href="#4-通信与技术" class="toc-link">4 通信与技术</a><a href="#5-文件和文本" class="toc-link">5 文件和文本</a><a href="#6-教育" class="toc-link">6 教育</a><a href="#7-娱乐与媒体" class="toc-link">7 娱乐与媒体</a><a href="#8-家庭和朋友" class="toc-link">8 家庭和朋友</a><a href="#9-食物" class="toc-link">9 食物</a><a href="#10-节日" class="toc-link">10 节日</a><a href="#11-兴趣爱好与休闲活动" class="toc-link">11 兴趣爱好与休闲活动</a><a href="#12-住宅和家庭" class="toc-link">12 住宅和家庭</a><a href="#13-测量" class="toc-link">13 测量</a><a href="#14-情感-观点和体验-1" class="toc-link">14 情感、观点和体验 1</a><a href="#15-地点-建筑-" class="toc-link">15 地点（建筑）</a><a href="#16-地点-乡村-" class="toc-link">16 地点（乡村）</a><a href="#17-地点-城镇-" class="toc-link">17 地点（城镇）</a><a href="#18公共服务系统" class="toc-link">18公共服务系统</a><a href="#19-购物" class="toc-link">19 购物</a><a href="#20-体育" class="toc-link">20 体育</a><a href="#21-大自然" class="toc-link">21 大自然</a><a href="#22-时间" class="toc-link">22 时间</a><a href="#23-旅游和交通运输" class="toc-link">23 旅游和交通运输</a><a href="#24-天气" class="toc-link">24 天气</a><a href="#25-工作和职业" class="toc-link">25 工作和职业</a>
    </div>
  </aside>
  <div class="main">
    
    <section id="1-家电" class="section">
      <div class="section-header">
        <h2>1 家电</h2>
        <div class="section-actions">
          <button onclick="openStandalone('1 家电.html')">打开原文件</button>
          <button onclick="toggleHeight('1-家电')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;电子设备单词闪卡记忆系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&amp;family=Poppins:wght@500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#x27;Roboto&#x27;, &#x27;Poppins&#x27;, sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background: rgba(255, 255, 255, 0.97);
            border-radius: 25px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            padding: 35px;
            position: relative;
        }
        
        header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
        }
        
        h1 {
            color: #1a2a6c;
            font-size: 2.8rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        h1:after {
            content: &#x27;&#x27;;
            display: block;
            width: 70%;
            height: 5px;
            background: linear-gradient(to right, #1a2a6c, #b21f1f);
            margin: 15px auto 0;
            border-radius: 3px;
        }
        
        .subtitle {
            color: #555;
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 20px;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            background: linear-gradient(to right, #1a2a6c, #2c3e90);
            padding: 18px;
            border-radius: 15px;
            margin: 25px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }
        
        .stat-card {
            text-align: center;
            padding: 12px;
            flex: 1;
        }
        
        .stat-card h3 {
            font-size: 1.1rem;
            color: #fff;
            margin-bottom: 8px;
            font-weight: 400;
        }
        
        .stat-card p {
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .progress-container {
            width: 100%;
            background: #e0e0e0;
            border-radius: 10px;
            margin: 20px 0;
            height: 16px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #00c9a7, #00d2b8);
            border-radius: 10px;
            width: 0%;
            transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
            box-shadow: 0 2px 10px rgba(0, 201, 167, 0.4);
        }
        
        .card-container {
            perspective: 1500px;
            height: 380px;
            margin: 30px 0;
            position: relative;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 25px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
            cursor: pointer;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 35px;
            border-radius: 25px;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 3px solid #f0f0f0;
        }
        
        .card-back {
            background: linear-gradient(45deg, #1a2a6c, #2c3e90);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.8rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: #1a2a6c;
            text-align: center;
            font-family: &#x27;Poppins&#x27;, sans-serif;
        }
        
        .phonetic {
            font-size: 1.7rem;
            color: #6c757d;
            margin-bottom: 30px;
            font-weight: 500;
        }
        
        .sound-btn {
            background: linear-gradient(to right, #1a2a6c, #2c3e90);
            color: white;
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 20px rgba(26, 42, 108, 0.4);
            transition: all 0.3s ease;
            position: relative;
            z-index: 10;
        }
        
        .sound-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 10px 25px rgba(26, 42, 108, 0.6);
        }
        
        .sound-btn.pulse {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .meaning {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 35px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .example {
            font-size: 1.5rem;
            font-style: italic;
            text-align: center;
            line-height: 1.7;
            max-width: 90%;
            background: rgba(255, 255, 255, 0.15);
            padding: 15px 25px;
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 15px;
        }
        
        .btn {
            flex: 1;
            padding: 18px 25px;
            border: none;
            border-radius: 15px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
        }
        
        .btn i {
            margin-right: 12px;
            font-size: 1.5rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #00c9a7, #00d2b8);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #ffb347, #ffcc33);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(2px);
        }
        
        .review-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            margin-top: 35px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: none;
        }
        
        .review-section h2 {
            color: #1a2a6c;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.2rem;
            font-weight: 700;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .review-word {
            background: linear-gradient(to right, #1a2a6c, #2c3e90);
            color: white;
            padding: 12px 25px;
            border-radius: 35px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(26, 42, 108, 0.3);
        }
        
        .review-word:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(26, 42, 108, 0.4);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .review-btn {
            padding: 15px 35px;
            background: linear-gradient(to right, #1a2a6c, #2c3e90);
            color: white;
            border: none;
            border-radius: 35px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 7px 20px rgba(26, 42, 108, 0.3);
        }
        
        .review-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(26, 42, 108, 0.4);
        }
        
        .flip-hint {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: #6c757d;
            font-size: 1.1rem;
            animation: pulse 2s infinite;
        }
        
        .device-icon {
            position: absolute;
            font-size: 6rem;
            opacity: 0.1;
            z-index: 0;
        }
        
        .device-icon.top-left {
            top: 20px;
            left: 20px;
        }
        
        .device-icon.top-right {
            top: 20px;
            right: 20px;
        }
        
        .device-icon.bottom-left {
            bottom: 20px;
            left: 20px;
        }
        
        .device-icon.bottom-right {
            bottom: 20px;
            right: 20px;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .word {
                font-size: 2.8rem;
            }
            
            .meaning {
                font-size: 2.2rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                padding: 16px;
            }
            
            .card-container {
                height: 320px;
            }
            
            .stat-card p {
                font-size: 1.8rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;header&gt;
            &lt;h1&gt;&lt;i class=&quot;fas fa-mobile-alt&quot;&gt;&lt;/i&gt; 电子设备单词闪卡记忆系统&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot;&gt;翻转卡片查看释义，根据记忆程度选择按钮 - 改进的发音系统&lt;/p&gt;
        &lt;/header&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;剩余单词&lt;/h3&gt;
                &lt;p id=&quot;remaining-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;已掌握&lt;/h3&gt;
                &lt;p id=&quot;known-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;需复习&lt;/h3&gt;
                &lt;p id=&quot;review-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;i class=&quot;fas fa-camera device-icon top-left&quot;&gt;&lt;/i&gt;
                    &lt;i class=&quot;fas fa-laptop device-icon top-right&quot;&gt;&lt;/i&gt;
                    &lt;i class=&quot;fas fa-mobile-alt device-icon bottom-left&quot;&gt;&lt;/i&gt;
                    &lt;i class=&quot;fas fa-tv device-icon bottom-right&quot;&gt;&lt;/i&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;camera&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈkæmərə/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;sound-btn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;相机&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;She used her new camera to take photos of the sunset.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo-alt&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;
                &lt;!-- 复习单词将在这里显示 --&gt;
            &lt;/div&gt;
            &lt;div class=&quot;review-controls&quot;&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 全部复习
                &lt;/button&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-arrow-right&quot;&gt;&lt;/i&gt; 继续学习
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 电子设备相关单词数据库
        const words = [
            { word: &quot;camera&quot;, phonetic: &quot;/ˈkæmərə/&quot;, meaning: &quot;相机&quot;, example: &quot;She used her new camera to take photos of the sunset.&quot; },
            { word: &quot;CD player&quot;, phonetic: &quot;/ˌsiːˈdiː pleɪər/&quot;, meaning: &quot;CD播放器&quot;, example: &quot;He found his old CD player in the attic.&quot; },
            { word: &quot;cell phone&quot;, phonetic: &quot;/ˈsel foʊn/&quot;, meaning: &quot;手机&quot;, example: &quot;Almost everyone carries a cell phone these days.&quot; },
            { word: &quot;clock&quot;, phonetic: &quot;/klɒk/&quot;, meaning: &quot;时钟&quot;, example: &quot;The clock on the wall showed it was midnight.&quot; },
            { word: &quot;computer&quot;, phonetic: &quot;/kəmˈpjuːtər/&quot;, meaning: &quot;电脑&quot;, example: &quot;I use my computer for work and entertainment.&quot; },
            { word: &quot;cooker&quot;, phonetic: &quot;/ˈkʊkər/&quot;, meaning: &quot;炊具&quot;, example: &quot;She bought a new electric cooker for her kitchen.&quot; },
            { word: &quot;digital camera&quot;, phonetic: &quot;/ˈdɪdʒɪtl ˈkæmərə/&quot;, meaning: &quot;数码相机&quot;, example: &quot;His digital camera takes high-resolution photos.&quot; },
            { word: &quot;DVD player&quot;, phonetic: &quot;/ˌdiːviːˈdiː pleɪər/&quot;, meaning: &quot;DVD播放器&quot;, example: &quot;We watched a movie on the DVD player.&quot; },
            { word: &quot;electric&quot;, phonetic: &quot;/ɪˈlektrɪk/&quot;, meaning: &quot;电的&quot;, example: &quot;The car runs on electric power.&quot; },
            { word: &quot;electricity&quot;, phonetic: &quot;/ɪˌlekˈtrɪsəti/&quot;, meaning: &quot;电力&quot;, example: &quot;The storm caused a loss of electricity.&quot; },
            { word: &quot;fridge&quot;, phonetic: &quot;/frɪdʒ/&quot;, meaning: &quot;冰箱&quot;, example: &quot;Put the milk back in the fridge.&quot; },
            { word: &quot;gas&quot;, phonetic: &quot;/ɡæs/&quot;, meaning: &quot;气体；燃气&quot;, example: &quot;We use gas for cooking and heating.&quot; },
            { word: &quot;heating&quot;, phonetic: &quot;/ˈhiːtɪŋ/&quot;, meaning: &quot;供暖系统&quot;, example: &quot;The heating keeps our house warm in winter.&quot; },
            { word: &quot;lamp&quot;, phonetic: &quot;/læmp/&quot;, meaning: &quot;灯&quot;, example: &quot;She turned on the bedside lamp to read.&quot; },
            { word: &quot;laptop&quot;, phonetic: &quot;/ˈlæptɒp/&quot;, meaning: &quot;笔记本电脑&quot;, example: &quot;I take my laptop to work every day.&quot; },
            { word: &quot;lights&quot;, phonetic: &quot;/laɪts/&quot;, meaning: &quot;灯光&quot;, example: &quot;Turn off the lights when you leave.&quot; },
            { word: &quot;mobile phone&quot;, phonetic: &quot;/ˈmoʊbaɪl foʊn/&quot;, meaning: &quot;手机&quot;, example: &quot;He answered his mobile phone during the meeting.&quot; },
            { word: &quot;MP3 player&quot;, phonetic: &quot;/ˌem piː ˈθriː pleɪər/&quot;, meaning: &quot;MP3播放器&quot;, example: &quot;She listens to music on her MP3 player.&quot; },
            { word: &quot;PC&quot;, phonetic: &quot;/ˌpiː ˈsiː/&quot;, meaning: &quot;个人电脑&quot;, example: &quot;The office provides each employee with a PC.&quot; },
            { word: &quot;phone&quot;, phonetic: &quot;/foʊn/&quot;, meaning: &quot;电话&quot;, example: &quot;Can I use your phone to make a call?&quot; },
            { word: &quot;radio&quot;, phonetic: &quot;/ˈreɪdiəʊ/&quot;, meaning: &quot;收音机&quot;, example: &quot;I listen to the news on the radio every morning.&quot; },
            { word: &quot;telephone&quot;, phonetic: &quot;/ˈtelɪfoʊn/&quot;, meaning: &quot;电话&quot;, example: &quot;The telephone rang just as we were leaving.&quot; },
            { word: &quot;television/TV&quot;, phonetic: &quot;/ˈtelɪvɪʒn/&quot;, meaning: &quot;电视&quot;, example: &quot;We watch the evening news on television.&quot; },
            { word: &quot;video&quot;, phonetic: &quot;/ˈvɪdiəʊ/&quot;, meaning: &quot;视频&quot;, example: &quot;She recorded a video of her daughter&#x27;s first steps.&quot; },
            { word: &quot;washing machine&quot;, phonetic: &quot;/ˈwɒʃɪŋ məˌʃiːn/&quot;, meaning: &quot;洗衣机&quot;, example: &quot;The washing machine broke down yesterday.&quot; }
        ];

        // 应用状态
        const state = {
            allWords: [...words],
            remainingWords: [...words],
            knownWords: [],
            reviewWords: [],
            currentWord: null,
            speechSynth: window.speechSynthesis,
            utterance: null
        };

        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;sound-btn&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const remainingCount = document.getElementById(&#x27;remaining-count&#x27;);
        const knownCount = document.getElementById(&#x27;known-count&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);

        // 初始化
        function init() {
            updateStats();
            nextWord();
            
            // 事件监听
            card.addEventListener(&#x27;click&#x27;, flipCard);
            soundBtn.addEventListener(&#x27;click&#x27;, playSound);
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;unsure&#x27;));
            dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;dont-know&#x27;));
            reviewAllBtn.addEventListener(&#x27;click&#x27;, reviewAll);
            continueBtn.addEventListener(&#x27;click&#x27;, hideReviewSection);
        }

        // 翻转卡片
        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        // 播放发音 - 改进版
        function playSound() {
            if (state.currentWord) {
                // 停止任何正在进行的发音
                if (state.speechSynth.speaking) {
                    state.speechSynth.cancel();
                }
                
                // 添加脉冲动画
                soundBtn.classList.add(&#x27;pulse&#x27;);
                
                // 创建新的发音实例
                state.utterance = new SpeechSynthesisUtterance(state.currentWord.word);
                state.utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                state.utterance.pitch = 1; // 音调
                state.utterance.rate = 0.9; // 语速
                
                // 发音结束后的回调
                state.utterance.onend = function() {
                    soundBtn.classList.remove(&#x27;pulse&#x27;);
                };
                
                // 播放发音
                state.speechSynth.speak(state.utterance);
            }
        }

        // 获取随机单词
        function getRandomWord() {
            if (state.remainingWords.length === 0) {
                if (state.reviewWords.length &gt; 0) {
                    showReviewSection();
                    return null;
                }
                return null; // 所有单词都学完了
            }
            
            const randomIndex = Math.floor(Math.random() * state.remainingWords.length);
            return state.remainingWords[randomIndex];
        }

        // 显示下一个单词
        function nextWord() {
            const word = getRandomWord();
            if (!word) {
                // 所有单词都学完了
                wordEl.textContent = &quot;恭喜！&quot;;
                phoneticEl.textContent = &quot;你已经学完了所有单词&quot;;
                meaningEl.textContent = &quot;&quot;;
                exampleEl.textContent = &quot;&quot;;
                return;
            }
            
            state.currentWord = word;
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = word.example;
            
            // 确保卡片是正面朝上
            card.classList.remove(&#x27;flipped&#x27;);
            
            updateStats();
        }

        // 处理用户响应
        function handleResponse(response) {
            if (!state.currentWord) return;
            
            const word = state.currentWord;
            
            // 从剩余单词中移除
            state.remainingWords = state.remainingWords.filter(w =&gt; w.word !== word.word);
            
            // 根据响应处理
            if (response === &#x27;known&#x27;) {
                state.knownWords.push(word);
            } else {
                // 避免重复添加
                if (!state.reviewWords.some(w =&gt; w.word === word.word)) {
                    state.reviewWords.push(word);
                }
            }
            
            nextWord();
        }

        // 显示复习部分
        function showReviewSection() {
            // 更新复习单词显示
            reviewWordsContainer.innerHTML = &#x27;&#x27;;
            state.reviewWords.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 点击复习单词时显示该单词
                    state.currentWord = word;
                    wordEl.textContent = word.word;
                    phoneticEl.textContent = word.phonetic;
                    meaningEl.textContent = word.meaning;
                    exampleEl.textContent = word.example;
                    card.classList.remove(&#x27;flipped&#x27;);
                    hideReviewSection();
                });
                reviewWordsContainer.appendChild(wordEl);
            });
            
            reviewSection.style.display = &#x27;block&#x27;;
        }

        // 隐藏复习部分
        function hideReviewSection() {
            reviewSection.style.display = &#x27;none&#x27;;
            // 将复习单词放回剩余单词列表
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            nextWord();
        }

        // 复习所有单词
        function reviewAll() {
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            hideReviewSection();
        }

        // 更新统计数据
        function updateStats() {
            remainingCount.textContent = state.remainingWords.length;
            knownCount.textContent = state.knownWords.length;
            reviewCount.textContent = state.reviewWords.length;
            
            // 更新进度条
            const totalWords = state.allWords.length;
            const learnedWords = state.knownWords.length;
            const progress = (learnedWords / totalWords) * 100;
            progressBar.style.width = `${progress}%`;
        }

        // 初始化应用
        document.addEventListener(&#x27;DOMContentLoaded&#x27;, init);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="2-服装与装饰" class="section">
      <div class="section-header">
        <h2>2 服装与装饰</h2>
        <div class="section-actions">
          <button onclick="openStandalone('2 服装与装饰.html')">打开原文件</button>
          <button onclick="toggleHeight('2-服装与装饰')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;服装与配饰单词闪卡学习系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;family=Dancing+Script:wght@700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#x27;Poppins&#x27;, sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 850px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 25px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            padding: 35px;
            position: relative;
        }
        
        .fashion-header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 10;
        }
        
        h1 {
            color: #ff6b6b;
            font-size: 3.2rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            font-family: &#x27;Poppins&#x27;, sans-serif;
        }
        
        h1:after {
            content: &#x27;&#x27;;
            display: block;
            width: 70%;
            height: 5px;
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            margin: 15px auto 0;
            border-radius: 3px;
        }
        
        .subtitle {
            color: #666;
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto 20px;
            font-weight: 500;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            padding: 18px;
            border-radius: 15px;
            margin: 25px 0;
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.25);
        }
        
        .stat-card {
            text-align: center;
            padding: 12px;
            flex: 1;
        }
        
        .stat-card h3 {
            font-size: 1.1rem;
            color: #fff;
            margin-bottom: 8px;
            font-weight: 400;
            letter-spacing: 0.5px;
        }
        
        .stat-card p {
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .progress-container {
            width: 100%;
            background: #f0f0f0;
            border-radius: 10px;
            margin: 20px 0;
            height: 16px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            border-radius: 10px;
            width: 0%;
            transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
            box-shadow: 0 2px 10px rgba(255, 107, 107, 0.4);
        }
        
        .card-container {
            perspective: 1500px;
            height: 380px;
            margin: 30px 0;
            position: relative;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 25px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
            cursor: pointer;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 35px;
            border-radius: 25px;
            overflow: hidden;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 3px solid #f8f8f8;
        }
        
        .card-back {
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: #ff6b6b;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .phonetic {
            font-size: 1.6rem;
            color: #777;
            margin-bottom: 30px;
            font-weight: 500;
        }
        
        .sound-btn {
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
            transition: all 0.3s ease;
            position: relative;
            z-index: 10;
        }
        
        .sound-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 10px 25px rgba(255, 107, 107, 0.6);
        }
        
        .sound-btn.pulse {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .meaning {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }
        
        .example {
            font-size: 1.4rem;
            font-style: italic;
            text-align: center;
            line-height: 1.7;
            max-width: 90%;
            background: rgba(255, 255, 255, 0.2);
            padding: 15px 25px;
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 15px;
        }
        
        .btn {
            flex: 1;
            padding: 18px 25px;
            border: none;
            border-radius: 15px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12);
        }
        
        .btn i {
            margin-right: 12px;
            font-size: 1.5rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #56ab2f, #a8e063);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #ffb347, #ffcc33);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
        }
        
        .btn:active {
            transform: translateY(2px);
        }
        
        .review-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            margin-top: 35px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: none;
        }
        
        .review-section h2 {
            color: #ff6b6b;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.2rem;
            font-weight: 700;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .review-word {
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            color: white;
            padding: 12px 25px;
            border-radius: 35px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
        }
        
        .review-word:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .review-btn {
            padding: 15px 35px;
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            border-radius: 35px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 7px 20px rgba(255, 107, 107, 0.3);
        }
        
        .review-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
        }
        
        .flip-hint {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: #777;
            font-size: 1.1rem;
            animation: pulse 2s infinite;
        }
        
        .fashion-icon {
            position: absolute;
            font-size: 5rem;
            opacity: 0.1;
            z-index: 0;
            color: #ff6b6b;
        }
        
        .fashion-icon.top-left {
            top: 20px;
            left: 20px;
        }
        
        .fashion-icon.top-right {
            top: 20px;
            right: 20px;
        }
        
        .fashion-icon.bottom-left {
            bottom: 20px;
            left: 20px;
        }
        
        .fashion-icon.bottom-right {
            bottom: 20px;
            right: 20px;
        }
        
        .clothes-hanger {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12rem;
            opacity: 0.05;
            z-index: 0;
            color: #ff6b6b;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.4rem;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .meaning {
                font-size: 2.0rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                padding: 16px;
            }
            
            .card-container {
                height: 320px;
            }
            
            .stat-card p {
                font-size: 1.8rem;
            }
            
            .fashion-icon {
                font-size: 3.5rem;
            }
            
            .clothes-hanger {
                font-size: 8rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;fashion-header&quot;&gt;
            &lt;h1&gt;&lt;i class=&quot;fas fa-tshirt&quot;&gt;&lt;/i&gt; 服装与配饰单词闪卡&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot;&gt;学习服装、配饰和穿搭相关的英语单词 - 点击卡片翻转，点击喇叭听发音&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;剩余单词&lt;/h3&gt;
                &lt;p id=&quot;remaining-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;已掌握&lt;/h3&gt;
                &lt;p id=&quot;known-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;需复习&lt;/h3&gt;
                &lt;p id=&quot;review-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;i class=&quot;fas fa-hat-cowboy fashion-icon top-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-socks fashion-icon top-right&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-umbrella fashion-icon bottom-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-glasses fashion-icon bottom-right&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-tshirt clothes-hanger&quot;&gt;&lt;/i&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;dress&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/dres/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;sound-btn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;连衣裙&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;She wore a beautiful red dress to the party.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo-alt&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;
                &lt;!-- 复习单词将在这里显示 --&gt;
            &lt;/div&gt;
            &lt;div class=&quot;review-controls&quot;&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 全部复习
                &lt;/button&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-arrow-right&quot;&gt;&lt;/i&gt; 继续学习
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 服装与配饰单词数据库
        const words = [
            { word: &quot;bag&quot;, phonetic: &quot;/bæɡ/&quot;, meaning: &quot;包&quot;, example: &quot;She carried a leather bag to the office.&quot; },
            { word: &quot;bathing suit&quot;, phonetic: &quot;/ˈbeɪðɪŋ suːt/&quot;, meaning: &quot;泳衣&quot;, example: &quot;I need a new bathing suit for our beach vacation.&quot; },
            { word: &quot;belt&quot;, phonetic: &quot;/belt/&quot;, meaning: &quot;腰带&quot;, example: &quot;He tightened his belt before running.&quot; },
            { word: &quot;blouse&quot;, phonetic: &quot;/blaʊz/&quot;, meaning: &quot;女式衬衫&quot;, example: &quot;She wore a silk blouse with her skirt.&quot; },
            { word: &quot;boot&quot;, phonetic: &quot;/buːt/&quot;, meaning: &quot;靴子&quot;, example: &quot;I wear warm boots in winter.&quot; },
            { word: &quot;bracelet&quot;, phonetic: &quot;/ˈbreɪslət/&quot;, meaning: &quot;手镯&quot;, example: &quot;My grandmother gave me a gold bracelet.&quot; },
            { word: &quot;cap&quot;, phonetic: &quot;/kæp/&quot;, meaning: &quot;帽子&quot;, example: &quot;He wore a baseball cap to the game.&quot; },
            { word: &quot;chain&quot;, phonetic: &quot;/tʃeɪn/&quot;, meaning: &quot;链子&quot;, example: &quot;She has a gold chain around her neck.&quot; },
            { word: &quot;clothes&quot;, phonetic: &quot;/kləʊðz/&quot;, meaning: &quot;衣服&quot;, example: &quot;I need to buy new clothes for summer.&quot; },
            { word: &quot;coat&quot;, phonetic: &quot;/kəʊt/&quot;, meaning: &quot;外套&quot;, example: &quot;Put on your coat, it&#x27;s cold outside.&quot; },
            { word: &quot;costume (swimming)&quot;, phonetic: &quot;/ˈkɒstjuːm/&quot;, meaning: &quot;泳衣&quot;, example: &quot;She bought a new swimming costume for her lessons.&quot; },
            { word: &quot;dress&quot;, phonetic: &quot;/dres/&quot;, meaning: &quot;连衣裙&quot;, example: &quot;She wore a beautiful red dress to the party.&quot; },
            { word: &quot;earring&quot;, phonetic: &quot;/ˈɪərɪŋ/&quot;, meaning: &quot;耳环&quot;, example: &quot;She lost one of her diamond earrings.&quot; },
            { word: &quot;fashion&quot;, phonetic: &quot;/ˈfæʃn/&quot;, meaning: &quot;时尚&quot;, example: &quot;Paris is known for its fashion industry.&quot; },
            { word: &quot;get dressed&quot;, phonetic: &quot;/ɡet drest/&quot;, meaning: &quot;穿衣服&quot;, example: &quot;I get dressed quickly every morning.&quot; },
            { word: &quot;glasses&quot;, phonetic: &quot;/ˈɡlɑːsɪz/&quot;, meaning: &quot;眼镜&quot;, example: &quot;I wear glasses for reading.&quot; },
            { word: &quot;glove&quot;, phonetic: &quot;/ɡlʌv/&quot;, meaning: &quot;手套&quot;, example: &quot;Wear gloves to keep your hands warm.&quot; },
            { word: &quot;handbag&quot;, phonetic: &quot;/ˈhændbæɡ/&quot;, meaning: &quot;手提包&quot;, example: &quot;Her handbag matched her shoes perfectly.&quot; },
            { word: &quot;hat&quot;, phonetic: &quot;/hæt/&quot;, meaning: &quot;帽子&quot;, example: &quot;He tipped his hat to the lady.&quot; },
            { word: &quot;jacket&quot;, phonetic: &quot;/ˈdʒækɪt/&quot;, meaning: &quot;夹克&quot;, example: &quot;He wore a leather jacket to the concert.&quot; },
            { word: &quot;jeans&quot;, phonetic: &quot;/dʒiːnz/&quot;, meaning: &quot;牛仔裤&quot;, example: &quot;I wear jeans almost every day.&quot; },
            { word: &quot;jewellery/jewelry&quot;, phonetic: &quot;/ˈdʒuːəlri/&quot;, meaning: &quot;珠宝&quot;, example: &quot;She keeps her jewellery in a special box.&quot; },
            { word: &quot;jumper&quot;, phonetic: &quot;/ˈdʒʌmpə/&quot;, meaning: &quot;毛衣&quot;, example: &quot;She knitted a warm jumper for her son.&quot; },
            { word: &quot;kit&quot;, phonetic: &quot;/kɪt/&quot;, meaning: &quot;套装&quot;, example: &quot;The football team wore their new kit.&quot; },
            { word: &quot;necklace&quot;, phonetic: &quot;/ˈnekləs/&quot;, meaning: &quot;项链&quot;, example: &quot;He gave her a pearl necklace for her birthday.&quot; },
            { word: &quot;pocket&quot;, phonetic: &quot;/ˈpɒkɪt/&quot;, meaning: &quot;口袋&quot;, example: &quot;He kept his keys in his front pocket.&quot; },
            { word: &quot;purse&quot;, phonetic: &quot;/pɜːs/&quot;, meaning: &quot;钱包&quot;, example: &quot;She opened her purse to pay for the coffee.&quot; },
            { word: &quot;raincoat&quot;, phonetic: &quot;/ˈreɪnkəʊt/&quot;, meaning: &quot;雨衣&quot;, example: &quot;Don&#x27;t forget your raincoat; it might rain.&quot; },
            { word: &quot;ring&quot;, phonetic: &quot;/rɪŋ/&quot;, meaning: &quot;戒指&quot;, example: &quot;He put a ring on her finger.&quot; },
            { word: &quot;scarf&quot;, phonetic: &quot;/skɑːf/&quot;, meaning: &quot;围巾&quot;, example: &quot;She wrapped a warm scarf around her neck.&quot; },
            { word: &quot;sock&quot;, phonetic: &quot;/sɒk/&quot;, meaning: &quot;袜子&quot;, example: &quot;I need to buy some new socks.&quot; },
            { word: &quot;shirt&quot;, phonetic: &quot;/ʃɜːt/&quot;, meaning: &quot;衬衫&quot;, example: &quot;He wore a white shirt to the interview.&quot; },
            { word: &quot;shoes&quot;, phonetic: &quot;/ʃuːz/&quot;, meaning: &quot;鞋子&quot;, example: &quot;She bought new running shoes.&quot; },
            { word: &quot;shorts&quot;, phonetic: &quot;/ʃɔːts/&quot;, meaning: &quot;短裤&quot;, example: &quot;It&#x27;s too hot for trousers; wear shorts.&quot; },
            { word: &quot;skirt&quot;, phonetic: &quot;/skɜːt/&quot;, meaning: &quot;裙子&quot;, example: &quot;She wore a long skirt to the wedding.&quot; },
            { word: &quot;suit&quot;, phonetic: &quot;/suːt/&quot;, meaning: &quot;西装&quot;, example: &quot;He looks smart in his business suit.&quot; },
            { word: &quot;sunglasses&quot;, phonetic: &quot;/ˈsʌnɡlɑːsɪz/&quot;, meaning: &quot;太阳镜&quot;, example: &quot;She wore sunglasses to protect her eyes.&quot; },
            { word: &quot;sweater&quot;, phonetic: &quot;/ˈswetə/&quot;, meaning: &quot;毛衣&quot;, example: &quot;I&#x27;m wearing my favorite sweater today.&quot; },
            { word: &quot;swimming costume&quot;, phonetic: &quot;/ˈswɪmɪŋ ˌkɒstjuːm/&quot;, meaning: &quot;泳衣&quot;, example: &quot;She changed into her swimming costume.&quot; },
            { word: &quot;swimsuit&quot;, phonetic: &quot;/ˈswɪmsuːt/&quot;, meaning: &quot;泳衣&quot;, example: &quot;The swimsuit was on sale at the store.&quot; },
            { word: &quot;tie&quot;, phonetic: &quot;/taɪ/&quot;, meaning: &quot;领带&quot;, example: &quot;He wore a blue tie with his suit.&quot; },
            { word: &quot;tights&quot;, phonetic: &quot;/taɪts/&quot;, meaning: &quot;紧身裤&quot;, example: &quot;She wore tights under her dress.&quot; },
            { word: &quot;trainers&quot;, phonetic: &quot;/ˈtreɪnəz/&quot;, meaning: &quot;运动鞋&quot;, example: &quot;I need new trainers for the gym.&quot; },
            { word: &quot;trousers&quot;, phonetic: &quot;/ˈtraʊzəz/&quot;, meaning: &quot;裤子&quot;, example: &quot;He bought a new pair of trousers.&quot; },
            { word: &quot;try on (v)&quot;, phonetic: &quot;/traɪ ɒn/&quot;, meaning: &quot;试穿&quot;, example: &quot;I want to try on this jacket before buying it.&quot; },
            { word: &quot;T-shirt&quot;, phonetic: &quot;/ˈtiːʃɜːt/&quot;, meaning: &quot;T恤&quot;, example: &quot;He wore a blue T-shirt and jeans.&quot; },
            { word: &quot;umbrella&quot;, phonetic: &quot;/ʌmˈbrelə/&quot;, meaning: &quot;雨伞&quot;, example: &quot;Take an umbrella; it might rain.&quot; },
            { word: &quot;uniform&quot;, phonetic: &quot;/ˈjuːnɪfɔːm/&quot;, meaning: &quot;制服&quot;, example: &quot;The students wear school uniforms.&quot; },
            { word: &quot;wallet&quot;, phonetic: &quot;/ˈwɒlɪt/&quot;, meaning: &quot;钱包&quot;, example: &quot;He keeps his money in a leather wallet.&quot; },
            { word: &quot;watch&quot;, phonetic: &quot;/wɒtʃ/&quot;, meaning: &quot;手表&quot;, example: &quot;My grandfather gave me his old watch.&quot; },
            { word: &quot;wear (v)&quot;, phonetic: &quot;/weə/&quot;, meaning: &quot;穿，戴&quot;, example: &quot;I wear glasses for reading.&quot; }
        ];

        // 应用状态
        const state = {
            allWords: [...words],
            remainingWords: [...words],
            knownWords: [],
            reviewWords: [],
            currentWord: null,
            speechSynth: window.speechSynthesis,
            utterance: null
        };

        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;sound-btn&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const remainingCount = document.getElementById(&#x27;remaining-count&#x27;);
        const knownCount = document.getElementById(&#x27;known-count&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);

        // 初始化
        function init() {
            updateStats();
            nextWord();
            
            // 事件监听
            card.addEventListener(&#x27;click&#x27;, flipCard);
            soundBtn.addEventListener(&#x27;click&#x27;, playSound);
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;unsure&#x27;));
            dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;dont-know&#x27;));
            reviewAllBtn.addEventListener(&#x27;click&#x27;, reviewAll);
            continueBtn.addEventListener(&#x27;click&#x27;, hideReviewSection);
        }

        // 翻转卡片
        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        // 播放发音 - 改进版
        function playSound() {
            if (state.currentWord) {
                // 停止任何正在进行的发音
                if (state.speechSynth.speaking) {
                    state.speechSynth.cancel();
                }
                
                // 添加脉冲动画
                soundBtn.classList.add(&#x27;pulse&#x27;);
                
                // 创建新的发音实例
                state.utterance = new SpeechSynthesisUtterance(state.currentWord.word);
                state.utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                state.utterance.pitch = 1; // 音调
                state.utterance.rate = 0.9; // 语速
                
                // 发音结束后的回调
                state.utterance.onend = function() {
                    soundBtn.classList.remove(&#x27;pulse&#x27;);
                };
                
                // 播放发音
                state.speechSynth.speak(state.utterance);
            }
        }

        // 获取随机单词
        function getRandomWord() {
            if (state.remainingWords.length === 0) {
                if (state.reviewWords.length &gt; 0) {
                    showReviewSection();
                    return null;
                }
                return null; // 所有单词都学完了
            }
            
            const randomIndex = Math.floor(Math.random() * state.remainingWords.length);
            return state.remainingWords[randomIndex];
        }

        // 显示下一个单词
        function nextWord() {
            const word = getRandomWord();
            if (!word) {
                // 所有单词都学完了
                wordEl.textContent = &quot;恭喜！&quot;;
                phoneticEl.textContent = &quot;你已经学完了所有单词&quot;;
                meaningEl.textContent = &quot;&quot;;
                exampleEl.textContent = &quot;&quot;;
                return;
            }
            
            state.currentWord = word;
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = word.example;
            
            // 确保卡片是正面朝上
            card.classList.remove(&#x27;flipped&#x27;);
            
            updateStats();
        }

        // 处理用户响应
        function handleResponse(response) {
            if (!state.currentWord) return;
            
            const word = state.currentWord;
            
            // 从剩余单词中移除
            state.remainingWords = state.remainingWords.filter(w =&gt; w.word !== word.word);
            
            // 根据响应处理
            if (response === &#x27;known&#x27;) {
                state.knownWords.push(word);
            } else {
                // 避免重复添加
                if (!state.reviewWords.some(w =&gt; w.word === word.word)) {
                    state.reviewWords.push(word);
                }
            }
            
            nextWord();
        }

        // 显示复习部分
        function showReviewSection() {
            // 更新复习单词显示
            reviewWordsContainer.innerHTML = &#x27;&#x27;;
            state.reviewWords.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 点击复习单词时显示该单词
                    state.currentWord = word;
                    wordEl.textContent = word.word;
                    phoneticEl.textContent = word.phonetic;
                    meaningEl.textContent = word.meaning;
                    exampleEl.textContent = word.example;
                    card.classList.remove(&#x27;flipped&#x27;);
                    hideReviewSection();
                });
                reviewWordsContainer.appendChild(wordEl);
            });
            
            reviewSection.style.display = &#x27;block&#x27;;
        }

        // 隐藏复习部分
        function hideReviewSection() {
            reviewSection.style.display = &#x27;none&#x27;;
            // 将复习单词放回剩余单词列表
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            nextWord();
        }

        // 复习所有单词
        function reviewAll() {
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            hideReviewSection();
        }

        // 更新统计数据
        function updateStats() {
            remainingCount.textContent = state.remainingWords.length;
            knownCount.textContent = state.knownWords.length;
            reviewCount.textContent = state.reviewWords.length;
            
            // 更新进度条
            const totalWords = state.allWords.length;
            const learnedWords = state.knownWords.length;
            const progress = (learnedWords / totalWords) * 100;
            progressBar.style.width = `${progress}%`;
        }

        // 初始化应用
        document.addEventListener(&#x27;DOMContentLoaded&#x27;, init);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="3-颜色-Colours" class="section">
      <div class="section-header">
        <h2>3 颜色 Colours</h2>
        <div class="section-actions">
          <button onclick="openStandalone('3 颜色 Colours.html')">打开原文件</button>
          <button onclick="toggleHeight('3-颜色-Colours')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;颜色单词闪卡学习系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#x27;Poppins&#x27;, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 850px;
            background: rgba(255, 255, 255, 0.97);
            border-radius: 25px;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            padding: 35px;
            position: relative;
        }
        
        .colorful-header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 10;
        }
        
        h1 {
            color: #6a11cb;
            font-size: 3.2rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        h1:after {
            content: &#x27;&#x27;;
            display: block;
            width: 70%;
            height: 5px;
            background: linear-gradient(to right, #ff6b6b, #6a11cb);
            margin: 15px auto 0;
            border-radius: 3px;
        }
        
        .subtitle {
            color: #666;
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto 20px;
            font-weight: 500;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            padding: 18px;
            border-radius: 15px;
            margin: 25px 0;
            box-shadow: 0 8px 20px rgba(38, 84, 252, 0.25);
        }
        
        .stat-card {
            text-align: center;
            padding: 12px;
            flex: 1;
        }
        
        .stat-card h3 {
            font-size: 1.1rem;
            color: #fff;
            margin-bottom: 8px;
            font-weight: 400;
            letter-spacing: 0.5px;
        }
        
        .stat-card p {
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .progress-container {
            width: 100%;
            background: #f0f0f0;
            border-radius: 10px;
            margin: 20px 0;
            height: 16px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            border-radius: 10px;
            width: 0%;
            transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
            box-shadow: 0 2px 10px rgba(106, 17, 203, 0.4);
        }
        
        .card-container {
            perspective: 1500px;
            height: 380px;
            margin: 30px 0;
            position: relative;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 25px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
            cursor: pointer;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 35px;
            border-radius: 25px;
            overflow: hidden;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 3px solid #f0f0f0;
        }
        
        .card-back {
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 4.2rem;
            font-weight: 800;
            margin-bottom: 15px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: color 0.5s ease;
        }
        
        .phonetic {
            font-size: 1.8rem;
            color: #777;
            margin-bottom: 30px;
            font-weight: 500;
        }
        
        .sound-btn {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            border: none;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            font-size: 2.2rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 25px rgba(106, 17, 203, 0.4);
            transition: all 0.3s ease;
            position: relative;
            z-index: 10;
            margin-top: 10px;
        }
        
        .sound-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 10px 30px rgba(106, 17, 203, 0.6);
        }
        
        .sound-btn.pulse {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .meaning {
            font-size: 3.2rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .example {
            font-size: 1.5rem;
            font-style: italic;
            text-align: center;
            line-height: 1.7;
            max-width: 90%;
            background: rgba(255, 255, 255, 0.2);
            padding: 15px 25px;
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 15px;
        }
        
        .btn {
            flex: 1;
            padding: 18px 25px;
            border: none;
            border-radius: 15px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
        }
        
        .btn i {
            margin-right: 12px;
            font-size: 1.5rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #56ab2f, #a8e063);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #ffb347, #ffcc33);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(2px);
        }
        
        .review-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            margin-top: 35px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: none;
        }
        
        .review-section h2 {
            color: #6a11cb;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.2rem;
            font-weight: 700;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .review-word {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            padding: 12px 25px;
            border-radius: 35px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(106, 17, 203, 0.3);
        }
        
        .review-word:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(106, 17, 203, 0.4);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .review-btn {
            padding: 15px 35px;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            border: none;
            border-radius: 35px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 7px 20px rgba(106, 17, 203, 0.3);
        }
        
        .review-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(106, 17, 203, 0.4);
        }
        
        .flip-hint {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: #777;
            font-size: 1.1rem;
            animation: pulse 2s infinite;
        }
        
        .color-palette {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin: 15px 0;
            flex-wrap: wrap;
        }
        
        .color-box {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
        }
        
        .color-box:hover {
            transform: scale(1.2);
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.4rem;
            }
            
            .word {
                font-size: 3.0rem;
            }
            
            .meaning {
                font-size: 2.4rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                padding: 16px;
            }
            
            .card-container {
                height: 340px;
            }
            
            .stat-card p {
                font-size: 1.8rem;
            }
            
            .sound-btn {
                width: 70px;
                height: 70px;
                font-size: 1.8rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;colorful-header&quot;&gt;
            &lt;h1&gt;&lt;i class=&quot;fas fa-palette&quot;&gt;&lt;/i&gt; 颜色单词闪卡学习系统&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot;&gt;学习各种颜色的英文表达 - 点击卡片翻转，点击喇叭听发音&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;剩余单词&lt;/h3&gt;
                &lt;p id=&quot;remaining-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;已掌握&lt;/h3&gt;
                &lt;p id=&quot;known-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;需复习&lt;/h3&gt;
                &lt;p id=&quot;review-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;red&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/red/&lt;/div&gt;
                    
                    &lt;div class=&quot;color-palette&quot; id=&quot;color-palette&quot;&gt;
                        &lt;!-- 颜色预览将在这里动态生成 --&gt;
                    &lt;/div&gt;
                    
                    &lt;button class=&quot;sound-btn&quot; id=&quot;sound-btn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;红色&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;She wore a beautiful red dress to the party.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo-alt&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;
                &lt;!-- 复习单词将在这里显示 --&gt;
            &lt;/div&gt;
            &lt;div class=&quot;review-controls&quot;&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 全部复习
                &lt;/button&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-arrow-right&quot;&gt;&lt;/i&gt; 继续学习
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 颜色单词数据库
        const words = [
            { 
                word: &quot;black&quot;, 
                phonetic: &quot;/blæk/&quot;, 
                meaning: &quot;黑色&quot;, 
                example: &quot;She wore a little black dress to the party.&quot;,
                color: &quot;#000000&quot;
            },
            { 
                word: &quot;blue&quot;, 
                phonetic: &quot;/bluː/&quot;, 
                meaning: &quot;蓝色&quot;, 
                example: &quot;The sky was a beautiful shade of blue.&quot;,
                color: &quot;#3498db&quot;
            },
            { 
                word: &quot;bright&quot;, 
                phonetic: &quot;/braɪt/&quot;, 
                meaning: &quot;明亮的&quot;, 
                example: &quot;She wore a bright yellow jacket.&quot;,
                color: &quot;#f1c40f&quot;
            },
            { 
                word: &quot;brown&quot;, 
                phonetic: &quot;/braʊn/&quot;, 
                meaning: &quot;棕色&quot;, 
                example: &quot;The bear had thick brown fur.&quot;,
                color: &quot;#8B4513&quot;
            },
            { 
                word: &quot;dark&quot;, 
                phonetic: &quot;/dɑːk/&quot;, 
                meaning: &quot;深色的&quot;, 
                example: &quot;He prefers dark colors for his suits.&quot;,
                color: &quot;#2c3e50&quot;
            },
            { 
                word: &quot;golden&quot;, 
                phonetic: &quot;/ˈɡoʊldən/&quot;, 
                meaning: &quot;金色的&quot;, 
                example: &quot;The sunset painted the sky a golden hue.&quot;,
                color: &quot;#FFD700&quot;
            },
            { 
                word: &quot;green&quot;, 
                phonetic: &quot;/ɡriːn/&quot;, 
                meaning: &quot;绿色&quot;, 
                example: &quot;The grass is always greener on the other side.&quot;,
                color: &quot;#2ecc71&quot;
            },
            { 
                word: &quot;grey&quot;, 
                phonetic: &quot;/ɡreɪ/&quot;, 
                meaning: &quot;灰色&quot;, 
                example: &quot;The sky turned grey before the storm.&quot;,
                color: &quot;#95a5a6&quot;
            },
            { 
                word: &quot;light&quot;, 
                phonetic: &quot;/laɪt/&quot;, 
                meaning: &quot;浅色的&quot;, 
                example: &quot;She painted her room light blue.&quot;,
                color: &quot;#ecf0f1&quot;
            },
            { 
                word: &quot;orange&quot;, 
                phonetic: &quot;/ˈɔːrɪndʒ/&quot;, 
                meaning: &quot;橙色&quot;, 
                example: &quot;The sunset was a mix of orange and pink.&quot;,
                color: &quot;#e67e22&quot;
            },
            { 
                word: &quot;pale&quot;, 
                phonetic: &quot;/peɪl/&quot;, 
                meaning: &quot;苍白的&quot;, 
                example: &quot;She wore a pale pink sweater.&quot;,
                color: &quot;#fadbd8&quot;
            },
            { 
                word: &quot;pink&quot;, 
                phonetic: &quot;/pɪŋk/&quot;, 
                meaning: &quot;粉色&quot;, 
                example: &quot;The cherry blossoms were a delicate pink.&quot;,
                color: &quot;#f48fb1&quot;
            },
            { 
                word: &quot;purple&quot;, 
                phonetic: &quot;/ˈpɜːrpl/&quot;, 
                meaning: &quot;紫色&quot;, 
                example: &quot;Lavender fields are a beautiful shade of purple.&quot;,
                color: &quot;#9b59b6&quot;
            },
            { 
                word: &quot;red&quot;, 
                phonetic: &quot;/red/&quot;, 
                meaning: &quot;红色&quot;, 
                example: &quot;The rose was a deep, vibrant red.&quot;,
                color: &quot;#e74c3c&quot;
            },
            { 
                word: &quot;silver&quot;, 
                phonetic: &quot;/ˈsɪlvər/&quot;, 
                meaning: &quot;银色&quot;, 
                example: &quot;Her necklace was made of silver.&quot;,
                color: &quot;#bdc3c7&quot;
            },
            { 
                word: &quot;white&quot;, 
                phonetic: &quot;/waɪt/&quot;, 
                meaning: &quot;白色&quot;, 
                example: &quot;The snow was pure white.&quot;,
                color: &quot;#ffffff&quot;
            },
            { 
                word: &quot;yellow&quot;, 
                phonetic: &quot;/ˈjeloʊ/&quot;, 
                meaning: &quot;黄色&quot;, 
                example: &quot;The sunflowers were bright yellow.&quot;,
                color: &quot;#f1c40f&quot;
            }
        ];

        // 应用状态
        const state = {
            allWords: [...words],
            remainingWords: [...words],
            knownWords: [],
            reviewWords: [],
            currentWord: null,
            speechSynth: window.speechSynthesis,
            utterance: null
        };

        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;sound-btn&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const remainingCount = document.getElementById(&#x27;remaining-count&#x27;);
        const knownCount = document.getElementById(&#x27;known-count&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);
        const colorPalette = document.getElementById(&#x27;color-palette&#x27;);

        // 初始化
        function init() {
            updateStats();
            nextWord();
            
            // 事件监听
            card.addEventListener(&#x27;click&#x27;, flipCard);
            soundBtn.addEventListener(&#x27;click&#x27;, playSound);
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;unsure&#x27;));
            dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;dont-know&#x27;));
            reviewAllBtn.addEventListener(&#x27;click&#x27;, reviewAll);
            continueBtn.addEventListener(&#x27;click&#x27;, hideReviewSection);
        }

        // 翻转卡片
        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        // 播放发音 - 改进版
        function playSound() {
            if (state.currentWord) {
                // 停止任何正在进行的发音
                if (state.speechSynth.speaking) {
                    state.speechSynth.cancel();
                }
                
                // 添加脉冲动画
                soundBtn.classList.add(&#x27;pulse&#x27;);
                
                // 创建新的发音实例
                state.utterance = new SpeechSynthesisUtterance(state.currentWord.word);
                state.utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                state.utterance.pitch = 1; // 音调
                state.utterance.rate = 0.9; // 语速
                
                // 发音结束后的回调
                state.utterance.onend = function() {
                    soundBtn.classList.remove(&#x27;pulse&#x27;);
                };
                
                // 播放发音
                state.speechSynth.speak(state.utterance);
            }
        }

        // 获取随机单词
        function getRandomWord() {
            if (state.remainingWords.length === 0) {
                if (state.reviewWords.length &gt; 0) {
                    showReviewSection();
                    return null;
                }
                return null; // 所有单词都学完了
            }
            
            const randomIndex = Math.floor(Math.random() * state.remainingWords.length);
            return state.remainingWords[randomIndex];
        }

        // 显示下一个单词
        function nextWord() {
            const word = getRandomWord();
            if (!word) {
                // 所有单词都学完了
                wordEl.textContent = &quot;恭喜！&quot;;
                phoneticEl.textContent = &quot;你已经学完了所有单词&quot;;
                meaningEl.textContent = &quot;&quot;;
                exampleEl.textContent = &quot;&quot;;
                colorPalette.innerHTML = &quot;&quot;;
                return;
            }
            
            state.currentWord = word;
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = word.example;
            
            // 设置单词颜色
            wordEl.style.color = word.color;
            
            // 生成颜色预览
            generateColorPalette(word);
            
            // 确保卡片是正面朝上
            card.classList.remove(&#x27;flipped&#x27;);
            
            updateStats();
        }

        // 生成颜色预览
        function generateColorPalette(word) {
            colorPalette.innerHTML = &#x27;&#x27;;
            
            // 获取当前单词的颜色值
            const baseColor = word.color;
            
            // 创建一系列相似色调
            for (let i = 0; i &lt; 8; i++) {
                const colorBox = document.createElement(&#x27;div&#x27;);
                colorBox.className = &#x27;color-box&#x27;;
                
                // 创建颜色变化
                const hueShift = Math.floor(Math.random() * 30) - 15;
                const saturationChange = Math.floor(Math.random() * 20) - 10;
                const lightnessChange = Math.floor(Math.random() * 20) - 10;
                
                // 应用颜色
                colorBox.style.backgroundColor = `hsl(${parseInt(baseColor.substring(1, 3), 16) + hueShift}, 
                                               ${Math.max(10, Math.min(100, 50 + saturationChange))}%, 
                                               ${Math.max(20, Math.min(90, 60 + lightnessChange))}%)`;
                
                colorPalette.appendChild(colorBox);
            }
        }

        // 处理用户响应
        function handleResponse(response) {
            if (!state.currentWord) return;
            
            const word = state.currentWord;
            
            // 从剩余单词中移除
            state.remainingWords = state.remainingWords.filter(w =&gt; w.word !== word.word);
            
            // 根据响应处理
            if (response === &#x27;known&#x27;) {
                state.knownWords.push(word);
            } else {
                // 避免重复添加
                if (!state.reviewWords.some(w =&gt; w.word === word.word)) {
                    state.reviewWords.push(word);
                }
            }
            
            nextWord();
        }

        // 显示复习部分
        function showReviewSection() {
            // 更新复习单词显示
            reviewWordsContainer.innerHTML = &#x27;&#x27;;
            state.reviewWords.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.style.backgroundColor = word.color;
                wordEl.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 点击复习单词时显示该单词
                    state.currentWord = word;
                    wordEl.textContent = word.word;
                    phoneticEl.textContent = word.phonetic;
                    meaningEl.textContent = word.meaning;
                    exampleEl.textContent = word.example;
                    card.classList.remove(&#x27;flipped&#x27;);
                    hideReviewSection();
                });
                reviewWordsContainer.appendChild(wordEl);
            });
            
            reviewSection.style.display = &#x27;block&#x27;;
        }

        // 隐藏复习部分
        function hideReviewSection() {
            reviewSection.style.display = &#x27;none&#x27;;
            // 将复习单词放回剩余单词列表
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            nextWord();
        }

        // 复习所有单词
        function reviewAll() {
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            hideReviewSection();
        }

        // 更新统计数据
        function updateStats() {
            remainingCount.textContent = state.remainingWords.length;
            knownCount.textContent = state.knownWords.length;
            reviewCount.textContent = state.reviewWords.length;
            
            // 更新进度条
            const totalWords = state.allWords.length;
            const learnedWords = state.knownWords.length;
            const progress = (learnedWords / totalWords) * 100;
            progressBar.style.width = `${progress}%`;
        }

        // 初始化应用
        document.addEventListener(&#x27;DOMContentLoaded&#x27;, init);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="4-通信与技术" class="section">
      <div class="section-header">
        <h2>4 通信与技术</h2>
        <div class="section-actions">
          <button onclick="openStandalone('4 通信与技术.html')">打开原文件</button>
          <button onclick="toggleHeight('4-通信与技术')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;计算机与网络单词闪卡学习系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&amp;family=Orbitron:wght@400;500;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#x27;Roboto&#x27;, sans-serif;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #e0e0e0;
            overflow-x: hidden;
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background: rgba(15, 30, 45, 0.9);
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            padding: 35px;
            position: relative;
            border: 1px solid rgba(0, 195, 255, 0.2);
        }
        
        .tech-header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 10;
        }
        
        h1 {
            color: #00d9ff;
            font-family: &#x27;Orbitron&#x27;, sans-serif;
            font-size: 2.8rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            text-shadow: 0 0 10px rgba(0, 217, 255, 0.7);
            letter-spacing: 1px;
        }
        
        h1:after {
            content: &#x27;&#x27;;
            display: block;
            width: 70%;
            height: 3px;
            background: linear-gradient(to right, #00d9ff, #0077ff);
            margin: 15px auto 0;
            border-radius: 3px;
            box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
        }
        
        .subtitle {
            color: #a0c8e0;
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 20px;
            font-weight: 400;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            background: rgba(0, 40, 80, 0.7);
            padding: 18px;
            border-radius: 15px;
            margin: 25px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 150, 255, 0.2);
        }
        
        .stat-card {
            text-align: center;
            padding: 12px;
            flex: 1;
        }
        
        .stat-card h3 {
            font-size: 1.1rem;
            color: #00d9ff;
            margin-bottom: 8px;
            font-weight: 400;
        }
        
        .stat-card p {
            font-size: 2.2rem;
            font-weight: 700;
            color: #ffffff;
            text-shadow: 0 0 10px rgba(0, 217, 255, 0.7);
        }
        
        .progress-container {
            width: 100%;
            background: rgba(0, 30, 60, 0.7);
            border-radius: 10px;
            margin: 20px 0;
            height: 16px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 150, 255, 0.2);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #00d9ff, #0077ff);
            border-radius: 10px;
            width: 0%;
            transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
            box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
        }
        
        .card-container {
            perspective: 1500px;
            height: 380px;
            margin: 30px 0;
            position: relative;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            cursor: pointer;
            border: 1px solid rgba(0, 150, 255, 0.3);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 35px;
            border-radius: 20px;
            overflow: hidden;
        }
        
        .card-front {
            background: linear-gradient(135deg, #0a1929, #0d2b50);
            border: 2px solid rgba(0, 150, 255, 0.2);
        }
        
        .card-back {
            background: linear-gradient(135deg, #0d2b50, #0a1929);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.2rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #00d9ff;
            text-align: center;
            font-family: &#x27;Orbitron&#x27;, sans-serif;
            text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
            letter-spacing: 1px;
        }
        
        .phonetic {
            font-size: 1.5rem;
            color: #7fc1ff;
            margin-bottom: 30px;
            font-weight: 500;
        }
        
        .sound-btn {
            background: rgba(0, 100, 200, 0.3);
            color: #00d9ff;
            border: 2px solid #00d9ff;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 15px rgba(0, 217, 255, 0.4);
            transition: all 0.3s ease;
            position: relative;
            z-index: 10;
        }
        
        .sound-btn:hover {
            transform: scale(1.08);
            background: rgba(0, 150, 255, 0.4);
            box-shadow: 0 0 20px rgba(0, 217, 255, 0.7);
        }
        
        .sound-btn.pulse {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 217, 255, 0.4); }
            50% { transform: scale(1.1); box-shadow: 0 0 25px rgba(0, 217, 255, 0.7); }
            100% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 217, 255, 0.4); }
        }
        
        .meaning {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
            color: #00d9ff;
            text-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
        }
        
        .example {
            font-size: 1.3rem;
            text-align: center;
            line-height: 1.7;
            max-width: 90%;
            background: rgba(0, 50, 100, 0.3);
            padding: 15px 25px;
            border-radius: 15px;
            border: 1px solid rgba(0, 150, 255, 0.2);
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 15px;
        }
        
        .btn {
            flex: 1;
            padding: 18px 25px;
            border: none;
            border-radius: 12px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            background: rgba(0, 50, 100, 0.5);
            color: #fff;
            border: 1px solid rgba(0, 150, 255, 0.3);
        }
        
        .btn i {
            margin-right: 12px;
            font-size: 1.5rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, rgba(0, 200, 100, 0.6), rgba(0, 150, 100, 0.7));
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, rgba(200, 50, 50, 0.6), rgba(150, 0, 0, 0.7));
        }
        
        .btn.unsure {
            background: linear-gradient(to right, rgba(200, 150, 0, 0.6), rgba(180, 100, 0, 0.7));
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(0, 217, 255, 0.5);
        }
        
        .btn:active {
            transform: translateY(2px);
        }
        
        .review-section {
            background: rgba(0, 30, 60, 0.8);
            border-radius: 20px;
            padding: 30px;
            margin-top: 35px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            display: none;
            border: 1px solid rgba(0, 150, 255, 0.3);
        }
        
        .review-section h2 {
            color: #00d9ff;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.0rem;
            font-weight: 700;
            font-family: &#x27;Orbitron&#x27;, sans-serif;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .review-word {
            background: rgba(0, 100, 200, 0.4);
            color: #fff;
            padding: 12px 25px;
            border-radius: 30px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 150, 255, 0.3);
        }
        
        .review-word:hover {
            transform: translateY(-5px);
            background: rgba(0, 150, 255, 0.5);
            box-shadow: 0 8px 20px rgba(0, 150, 255, 0.4);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .review-btn {
            padding: 15px 35px;
            background: rgba(0, 100, 200, 0.5);
            color: white;
            border: 1px solid rgba(0, 150, 255, 0.3);
            border-radius: 30px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .review-btn:hover {
            transform: translateY(-3px);
            background: rgba(0, 150, 255, 0.6);
            box-shadow: 0 8px 20px rgba(0, 150, 255, 0.4);
        }
        
        .flip-hint {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: #7fc1ff;
            font-size: 1.0rem;
            animation: pulse 2s infinite;
        }
        
        .tech-icon {
            position: absolute;
            font-size: 5rem;
            opacity: 0.1;
            z-index: 0;
            color: #00d9ff;
        }
        
        .tech-icon.top-left {
            top: 20px;
            left: 20px;
        }
        
        .tech-icon.top-right {
            top: 20px;
            right: 20px;
        }
        
        .tech-icon.bottom-left {
            bottom: 20px;
            left: 20px;
        }
        
        .tech-icon.bottom-right {
            bottom: 20px;
            right: 20px;
        }
        
        .binary-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            opacity: 0.1;
            z-index: 0;
        }
        
        .binary-code {
            position: absolute;
            color: #00d9ff;
            font-size: 1.2rem;
            font-family: monospace;
            white-space: nowrap;
            animation: flow 20s linear infinite;
        }
        
        @keyframes flow {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .meaning {
                font-size: 2.0rem;
            }
            
            .example {
                font-size: 1.1rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                padding: 16px;
            }
            
            .card-container {
                height: 320px;
            }
            
            .stat-card p {
                font-size: 1.8rem;
            }
            
            .tech-icon {
                font-size: 3.5rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;binary-bg&quot; id=&quot;binary-bg&quot;&gt;
            &lt;!-- 二进制代码背景将在这里动态生成 --&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;tech-header&quot;&gt;
            &lt;h1&gt;&lt;i class=&quot;fas fa-laptop-code&quot;&gt;&lt;/i&gt; 计算机与网络单词闪卡&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot;&gt;学习计算机、互联网和通信相关的英语单词 - 点击卡片翻转，点击喇叭听发音&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;剩余单词&lt;/h3&gt;
                &lt;p id=&quot;remaining-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;已掌握&lt;/h3&gt;
                &lt;p id=&quot;known-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;需复习&lt;/h3&gt;
                &lt;p id=&quot;review-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;i class=&quot;fas fa-microchip tech-icon top-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-network-wired tech-icon top-right&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-mobile-alt tech-icon bottom-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-server tech-icon bottom-right&quot;&gt;&lt;/i&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;internet&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈɪntərnɛt/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;sound-btn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;互联网&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;The internet has revolutionized how we access information.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo-alt&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;
                &lt;!-- 复习单词将在这里显示 --&gt;
            &lt;/div&gt;
            &lt;div class=&quot;review-controls&quot;&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 全部复习
                &lt;/button&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-arrow-right&quot;&gt;&lt;/i&gt; 继续学习
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 计算机与网络单词数据库
        const words = [
            { word: &quot;address&quot;, phonetic: &quot;/əˈdres/&quot;, meaning: &quot;地址&quot;, example: &quot;Please enter your email address to register.&quot; },
            { word: &quot;at&quot;, phonetic: &quot;/æt/&quot;, meaning: &quot;在&quot;, example: &quot;You can find more information at our website.&quot; },
            { word: &quot;by post&quot;, phonetic: &quot;/baɪ pəʊst/&quot;, meaning: &quot;邮寄&quot;, example: &quot;We will send the documents to you by post.&quot; },
            { word: &quot;call (v)&quot;, phonetic: &quot;/kɔːl/&quot;, meaning: &quot;打电话&quot;, example: &quot;I will call you tomorrow to discuss the details.&quot; },
            { word: &quot;camera&quot;, phonetic: &quot;/ˈkæmərə/&quot;, meaning: &quot;相机&quot;, example: &quot;The camera on this phone takes excellent photos.&quot; },
            { word: &quot;CD player&quot;, phonetic: &quot;/ˌsiːˈdiː ˈpleɪə/&quot;, meaning: &quot;CD播放器&quot;, example: &quot;My old CD player still works perfectly.&quot; },
            { word: &quot;cell phone&quot;, phonetic: &quot;/ˈsel fəʊn/&quot;, meaning: &quot;手机&quot;, example: &quot;I use my cell phone for both work and personal calls.&quot; },
            { word: &quot;chat&quot;, phonetic: &quot;/tʃæt/&quot;, meaning: &quot;聊天&quot;, example: &quot;We can chat online about the project.&quot; },
            { word: &quot;chatroom&quot;, phonetic: &quot;/ˈtʃætruːm/&quot;, meaning: &quot;聊天室&quot;, example: &quot;The chatroom was full of people discussing the topic.&quot; },
            { word: &quot;click&quot;, phonetic: &quot;/klɪk/&quot;, meaning: &quot;点击&quot;, example: &quot;Click the button to submit your application.&quot; },
            { word: &quot;computer&quot;, phonetic: &quot;/kəmˈpjuːtə/&quot;, meaning: &quot;计算机&quot;, example: &quot;She uses her computer for graphic design work.&quot; },
            { word: &quot;memory&quot;, phonetic: &quot;/ˈmeməri/&quot;, meaning: &quot;内存&quot;, example: &quot;This computer has 16GB of memory for better performance.&quot; },
            { word: &quot;computer conversation&quot;, phonetic: &quot;/kəmˈpjuːtə ˌkɒnvəˈseɪʃn/&quot;, meaning: &quot;计算机对话&quot;, example: &quot;We had a computer conversation via video call.&quot; },
            { word: &quot;digital&quot;, phonetic: &quot;/ˈdɪdʒɪtl/&quot;, meaning: &quot;数字的&quot;, example: &quot;Digital technology has changed how we communicate.&quot; },
            { word: &quot;digital camera&quot;, phonetic: &quot;/ˈdɪdʒɪtl ˈkæmərə/&quot;, meaning: &quot;数码相机&quot;, example: &quot;He bought a new digital camera for his travels.&quot; },
            { word: &quot;dot&quot;, phonetic: &quot;/dɒt/&quot;, meaning: &quot;点&quot;, example: &quot;In email addresses, the @ symbol separates the name from the domain.&quot; },
            { word: &quot;download (n&amp;v)&quot;, phonetic: &quot;/ˈdaʊnləʊd/&quot;, meaning: &quot;下载&quot;, example: &quot;You can download the software from our website.&quot; },
            { word: &quot;DVD player&quot;, phonetic: &quot;/ˌdiːviːˈdiː ˈpleɪə/&quot;, meaning: &quot;DVD播放器&quot;, example: &quot;We watched the movie on our DVD player.&quot; },
            { word: &quot;email (n&amp;v)&quot;, phonetic: &quot;/ˈiːmeɪl/&quot;, meaning: &quot;电子邮件&quot;, example: &quot;I&#x27;ll send you an email with the details.&quot; },
            { word: &quot;envelope&quot;, phonetic: &quot;/ˈenvələʊp/&quot;, meaning: &quot;信封&quot;, example: &quot;Put the letter in an envelope before mailing it.&quot; },
            { word: &quot;file&quot;, phonetic: &quot;/faɪl/&quot;, meaning: &quot;文件&quot;, example: &quot;Save your work as a PDF file before sending it.&quot; },
            { word: &quot;information&quot;, phonetic: &quot;/ˌɪnfəˈmeɪʃn/&quot;, meaning: &quot;信息&quot;, example: &quot;The website provides valuable information about health.&quot; },
            { word: &quot;internet&quot;, phonetic: &quot;/ˈɪntərnɛt/&quot;, meaning: &quot;互联网&quot;, example: &quot;The internet has revolutionized how we access information.&quot; },
            { word: &quot;internet site&quot;, phonetic: &quot;/ˈɪntərnɛt saɪt/&quot;, meaning: &quot;网站&quot;, example: &quot;Our company has an internet site with product details.&quot; },
            { word: &quot;keyboard&quot;, phonetic: &quot;/ˈkiːbɔːd/&quot;, meaning: &quot;键盘&quot;, example: &quot;I spilled coffee on my computer keyboard.&quot; },
            { word: &quot;laptop&quot;, phonetic: &quot;/ˈlæptɒp/&quot;, meaning: &quot;笔记本电脑&quot;, example: &quot;She takes her laptop to work every day.&quot; },
            { word: &quot;mobile phone&quot;, phonetic: &quot;/ˈməʊbaɪl fəʊn/&quot;, meaning: &quot;手机&quot;, example: &quot;Most people now have a mobile phone.&quot; },
            { word: &quot;mouse&quot;, phonetic: &quot;/maʊs/&quot;, meaning: &quot;鼠标&quot;, example: &quot;Use the mouse to select the file you want.&quot; },
            { word: &quot;MP3 player&quot;, phonetic: &quot;/ˌempiːˈθriː ˈpleɪə/&quot;, meaning: &quot;MP3播放器&quot;, example: &quot;He listens to music on his MP3 player while jogging.&quot; },
            { word: &quot;net&quot;, phonetic: &quot;/net/&quot;, meaning: &quot;网络&quot;, example: &quot;The net allows us to connect with people worldwide.&quot; },
            { word: &quot;online&quot;, phonetic: &quot;/ˌɒnˈlaɪn/&quot;, meaning: &quot;在线&quot;, example: &quot;You can book tickets online for the concert.&quot; },
            { word: &quot;password&quot;, phonetic: &quot;/ˈpɑːswɜːd/&quot;, meaning: &quot;密码&quot;, example: &quot;Create a strong password to protect your account.&quot; },
            { word: &quot;PC&quot;, phonetic: &quot;/ˌpiːˈsiː/&quot;, meaning: &quot;个人电脑&quot;, example: &quot;The office provides each employee with a PC.&quot; },
            { word: &quot;phone&quot;, phonetic: &quot;/fəʊn/&quot;, meaning: &quot;电话&quot;, example: &quot;I need to charge my phone before we leave.&quot; },
            { word: &quot;photograph&quot;, phonetic: &quot;/ˈfəʊtəɡrɑːf/&quot;, meaning: &quot;照片&quot;, example: &quot;She took a beautiful photograph of the sunset.&quot; },
            { word: &quot;photography&quot;, phonetic: &quot;/fəˈtɒɡrəfi/&quot;, meaning: &quot;摄影&quot;, example: &quot;He studied photography at art school.&quot; },
            { word: &quot;post something online&quot;, phonetic: &quot;/pəʊst ˈsʌmθɪŋ ˌɒnˈlaɪn/&quot;, meaning: &quot;在线发布&quot;, example: &quot;I like to post photos online to share with friends.&quot; },
            { word: &quot;printer&quot;, phonetic: &quot;/ˈprɪntə/&quot;, meaning: &quot;打印机&quot;, example: &quot;The printer is out of ink, so we need to replace the cartridge.&quot; },
            { word: &quot;screen&quot;, phonetic: &quot;/skriːn/&quot;, meaning: &quot;屏幕&quot;, example: &quot;The computer screen is too bright in the dark room.&quot; },
            { word: &quot;software&quot;, phonetic: &quot;/ˈsɒftweə/&quot;, meaning: &quot;软件&quot;, example: &quot;This software helps organize your digital photos.&quot; },
            { word: &quot;talk&quot;, phonetic: &quot;/tɔːk/&quot;, meaning: &quot;谈话&quot;, example: &quot;We can talk on the phone about this tomorrow.&quot; },
            { word: &quot;telephone&quot;, phonetic: &quot;/ˈtelɪfəʊn/&quot;, meaning: &quot;电话&quot;, example: &quot;The telephone rang just as I was leaving.&quot; },
            { word: &quot;text (n&amp;v)&quot;, phonetic: &quot;/tekst/&quot;, meaning: &quot;文本；发短信&quot;, example: &quot;I&#x27;ll send you a text with the address.&quot; },
            { word: &quot;upload&quot;, phonetic: &quot;/ˈʌpləʊd/&quot;, meaning: &quot;上传&quot;, example: &quot;Please upload your documents to the system.&quot; },
            { word: &quot;video&quot;, phonetic: &quot;/ˈvɪdiəʊ/&quot;, meaning: &quot;视频&quot;, example: &quot;The video went viral on social media.&quot; },
            { word: &quot;web&quot;, phonetic: &quot;/web/&quot;, meaning: &quot;网络&quot;, example: &quot;The world wide web connects billions of devices.&quot; },
            { word: &quot;web page&quot;, phonetic: &quot;/ˈweb peɪdʒ/&quot;, meaning: &quot;网页&quot;, example: &quot;Our company&#x27;s web page has been redesigned.&quot; },
            { word: &quot;website&quot;, phonetic: &quot;/ˈwebsaɪt/&quot;, meaning: &quot;网站&quot;, example: &quot;Visit our website for more product information.&quot; }
        ];

        // 应用状态
        const state = {
            allWords: [...words],
            remainingWords: [...words],
            knownWords: [],
            reviewWords: [],
            currentWord: null,
            speechSynth: window.speechSynthesis,
            utterance: null
        };

        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;sound-btn&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const remainingCount = document.getElementById(&#x27;remaining-count&#x27;);
        const knownCount = document.getElementById(&#x27;known-count&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);
        const binaryBg = document.getElementById(&#x27;binary-bg&#x27;);

        // 初始化
        function init() {
            createBinaryBackground();
            updateStats();
            nextWord();
            
            // 事件监听
            card.addEventListener(&#x27;click&#x27;, flipCard);
            soundBtn.addEventListener(&#x27;click&#x27;, playSound);
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;unsure&#x27;));
            dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;dont-know&#x27;));
            reviewAllBtn.addEventListener(&#x27;click&#x27;, reviewAll);
            continueBtn.addEventListener(&#x27;click&#x27;, hideReviewSection);
        }

        // 创建二进制背景
        function createBinaryBackground() {
            for (let i = 0; i &lt; 50; i++) {
                const binary = document.createElement(&#x27;div&#x27;);
                binary.className = &#x27;binary-code&#x27;;
                binary.textContent = generateBinaryString(80);
                binary.style.left = Math.random() * 100 + &#x27;%&#x27;;
                binary.style.animationDuration = (Math.random() * 30 + 20) + &#x27;s&#x27;;
                binary.style.animationDelay = (Math.random() * -20) + &#x27;s&#x27;;
                binaryBg.appendChild(binary);
            }
        }
        
        // 生成二进制字符串
        function generateBinaryString(length) {
            let result = &#x27;&#x27;;
            for (let i = 0; i &lt; length; i++) {
                result += Math.random() &gt; 0.5 ? &#x27;1&#x27; : &#x27;0&#x27;;
                // 添加空格提高可读性
                if (i &gt; 0 &amp;&amp; i % 8 === 0) result += &#x27; &#x27;;
            }
            return result;
        }

        // 翻转卡片
        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        // 播放发音 - 改进版
        function playSound() {
            if (state.currentWord) {
                // 停止任何正在进行的发音
                if (state.speechSynth.speaking) {
                    state.speechSynth.cancel();
                }
                
                // 添加脉冲动画
                soundBtn.classList.add(&#x27;pulse&#x27;);
                
                // 创建新的发音实例
                state.utterance = new SpeechSynthesisUtterance(state.currentWord.word);
                state.utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                state.utterance.pitch = 1; // 音调
                state.utterance.rate = 0.9; // 语速
                
                // 发音结束后的回调
                state.utterance.onend = function() {
                    soundBtn.classList.remove(&#x27;pulse&#x27;);
                };
                
                // 播放发音
                state.speechSynth.speak(state.utterance);
            }
        }

        // 获取随机单词
        function getRandomWord() {
            if (state.remainingWords.length === 0) {
                if (state.reviewWords.length &gt; 0) {
                    showReviewSection();
                    return null;
                }
                return null; // 所有单词都学完了
            }
            
            const randomIndex = Math.floor(Math.random() * state.remainingWords.length);
            return state.remainingWords[randomIndex];
        }

        // 显示下一个单词
        function nextWord() {
            const word = getRandomWord();
            if (!word) {
                // 所有单词都学完了
                wordEl.textContent = &quot;恭喜！&quot;;
                phoneticEl.textContent = &quot;你已经学完了所有单词&quot;;
                meaningEl.textContent = &quot;&quot;;
                exampleEl.textContent = &quot;&quot;;
                return;
            }
            
            state.currentWord = word;
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = word.example;
            
            // 确保卡片是正面朝上
            card.classList.remove(&#x27;flipped&#x27;);
            
            updateStats();
        }

        // 处理用户响应
        function handleResponse(response) {
            if (!state.currentWord) return;
            
            const word = state.currentWord;
            
            // 从剩余单词中移除
            state.remainingWords = state.remainingWords.filter(w =&gt; w.word !== word.word);
            
            // 根据响应处理
            if (response === &#x27;known&#x27;) {
                state.knownWords.push(word);
            } else {
                // 避免重复添加
                if (!state.reviewWords.some(w =&gt; w.word === word.word)) {
                    state.reviewWords.push(word);
                }
            }
            
            nextWord();
        }

        // 显示复习部分
        function showReviewSection() {
            // 更新复习单词显示
            reviewWordsContainer.innerHTML = &#x27;&#x27;;
            state.reviewWords.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 点击复习单词时显示该单词
                    state.currentWord = word;
                    wordEl.textContent = word.word;
                    phoneticEl.textContent = word.phonetic;
                    meaningEl.textContent = word.meaning;
                    exampleEl.textContent = word.example;
                    card.classList.remove(&#x27;flipped&#x27;);
                    hideReviewSection();
                });
                reviewWordsContainer.appendChild(wordEl);
            });
            
            reviewSection.style.display = &#x27;block&#x27;;
        }

        // 隐藏复习部分
        function hideReviewSection() {
            reviewSection.style.display = &#x27;none&#x27;;
            // 将复习单词放回剩余单词列表
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            nextWord();
        }

        // 复习所有单词
        function reviewAll() {
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            hideReviewSection();
        }

        // 更新统计数据
        function updateStats() {
            remainingCount.textContent = state.remainingWords.length;
            knownCount.textContent = state.knownWords.length;
            reviewCount.textContent = state.reviewWords.length;
            
            // 更新进度条
            const totalWords = state.allWords.length;
            const learnedWords = state.knownWords.length;
            const progress = (learnedWords / totalWords) * 100;
            progressBar.style.width = `${progress}%`;
        }

        // 初始化应用
        document.addEventListener(&#x27;DOMContentLoaded&#x27;, init);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="5-文件和文本" class="section">
      <div class="section-header">
        <h2>5 文件和文本</h2>
        <div class="section-actions">
          <button onclick="openStandalone('5 文件和文本.html')">打开原文件</button>
          <button onclick="toggleHeight('5-文件和文本')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;文档与证件单词闪卡学习系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&amp;family=Merriweather:wght@300;400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#x27;Merriweather&#x27;, serif;
            background: linear-gradient(135deg, #e6d3a7 0%, #d7b98e 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #3a2c1e;
        }
        
        .container {
            width: 100%;
            max-width: 850px;
            background: rgba(255, 249, 230, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 40px rgba(107, 77, 36, 0.3);
            overflow: hidden;
            padding: 35px;
            position: relative;
            border: 8px double #8b5a2b;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 10;
        }
        
        h1 {
            color: #5d4037;
            font-family: &#x27;Cormorant Garamond&#x27;, serif;
            font-size: 3.2rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        h1:after {
            content: &#x27;&#x27;;
            display: block;
            width: 60%;
            height: 3px;
            background: linear-gradient(to right, #8b5a2b, #d7b98e);
            margin: 15px auto 0;
            border-radius: 3px;
        }
        
        .subtitle {
            color: #6d4c41;
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto 20px;
            font-weight: 400;
            font-style: italic;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            background: rgba(139, 90, 43, 0.15);
            padding: 18px;
            border-radius: 12px;
            margin: 25px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(139, 90, 43, 0.2);
        }
        
        .stat-card {
            text-align: center;
            padding: 12px;
            flex: 1;
        }
        
        .stat-card h3 {
            font-size: 1.1rem;
            color: #5d4037;
            margin-bottom: 8px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        .stat-card p {
            font-size: 2.2rem;
            font-weight: 700;
            color: #5d4037;
            font-family: &#x27;Cormorant Garamond&#x27;, serif;
        }
        
        .progress-container {
            width: 100%;
            background: #e0d5c4;
            border-radius: 8px;
            margin: 20px 0;
            height: 14px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
            border: 1px solid rgba(139, 90, 43, 0.2);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #8b5a2b, #b08d5d);
            border-radius: 8px;
            width: 0%;
            transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        
        .card-container {
            perspective: 1500px;
            height: 380px;
            margin: 30px 0;
            position: relative;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(107, 77, 36, 0.2);
            cursor: pointer;
            border: 1px solid rgba(139, 90, 43, 0.3);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 35px;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .card-front {
            background: linear-gradient(45deg, #f9f4e8, #f2e9d7);
            border: 1px solid #e6d3a7;
        }
        
        .card-back {
            background: linear-gradient(45deg, #e6d3a7, #d7b98e);
            color: #3a2c1e;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #5d4037;
            text-align: center;
            font-family: &#x27;Cormorant Garamond&#x27;, serif;
        }
        
        .phonetic {
            font-size: 1.6rem;
            color: #6d4c41;
            margin-bottom: 30px;
            font-weight: 500;
            font-style: italic;
        }
        
        .sound-btn {
            background: #8b5a2b;
            color: #f9f4e8;
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(139, 90, 43, 0.3);
            transition: all 0.3s ease;
            position: relative;
            z-index: 10;
        }
        
        .sound-btn:hover {
            transform: scale(1.08);
            background: #6d4c41;
            box-shadow: 0 8px 20px rgba(107, 77, 36, 0.4);
        }
        
        .sound-btn.pulse {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .meaning {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
            font-family: &#x27;Cormorant Garamond&#x27;, serif;
        }
        
        .example {
            font-size: 1.3rem;
            font-style: italic;
            text-align: center;
            line-height: 1.7;
            max-width: 90%;
            background: rgba(255, 249, 230, 0.6);
            padding: 15px 25px;
            border-radius: 8px;
            border: 1px solid rgba(139, 90, 43, 0.2);
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 15px;
        }
        
        .btn {
            flex: 1;
            padding: 18px 25px;
            border: none;
            border-radius: 8px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            font-family: &#x27;Cormorant Garamond&#x27;, serif;
            font-weight: 700;
        }
        
        .btn i {
            margin-right: 12px;
            font-size: 1.5rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #4caf50, #8bc34a);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #f44336, #e57373);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #ff9800, #ffb74d);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .btn:active {
            transform: translateY(2px);
        }
        
        .review-section {
            background: rgba(249, 242, 226, 0.95);
            border-radius: 12px;
            padding: 30px;
            margin-top: 35px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: none;
            border: 1px solid rgba(139, 90, 43, 0.2);
        }
        
        .review-section h2 {
            color: #5d4037;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.2rem;
            font-weight: 700;
            font-family: &#x27;Cormorant Garamond&#x27;, serif;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .review-word {
            background: linear-gradient(to right, #8b5a2b, #b08d5d);
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(139, 90, 43, 0.2);
            font-family: &#x27;Cormorant Garamond&#x27;, serif;
        }
        
        .review-word:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(139, 90, 43, 0.3);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .review-btn {
            padding: 15px 35px;
            background: linear-gradient(to right, #8b5a2b, #b08d5d);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(139, 90, 43, 0.2);
            font-family: &#x27;Cormorant Garamond&#x27;, serif;
        }
        
        .review-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(139, 90, 43, 0.3);
        }
        
        .flip-hint {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: #6d4c41;
            font-size: 1.1rem;
            animation: pulse 2s infinite;
            font-style: italic;
        }
        
        .document-icon {
            position: absolute;
            font-size: 5rem;
            opacity: 0.1;
            z-index: 0;
            color: #8b5a2b;
        }
        
        .document-icon.top-left {
            top: 20px;
            left: 20px;
        }
        
        .document-icon.top-right {
            top: 20px;
            right: 20px;
        }
        
        .document-icon.bottom-left {
            bottom: 20px;
            left: 20px;
        }
        
        .document-icon.bottom-right {
            bottom: 20px;
            right: 20px;
        }
        
        .paper-texture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(&quot;data:image/svg+xml,%3Csvg width=&#x27;100&#x27; height=&#x27;100&#x27; viewBox=&#x27;0 0 100 100&#x27; xmlns=&#x27;http://www.w3.org/2000/svg&#x27;%3E%3Cpath d=&#x27;M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z&#x27; fill=&#x27;%238b5a2b&#x27; fill-opacity=&#x27;0.1&#x27; fill-rule=&#x27;evenodd&#x27;/%3E%3C/svg%3E&quot;);
            opacity: 0.2;
            pointer-events: none;
        }
        
        .page-corner {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, transparent 50%, #d7b98e 50%);
            opacity: 0.5;
            z-index: 0;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.4rem;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .meaning {
                font-size: 2.0rem;
            }
            
            .example {
                font-size: 1.1rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                padding: 16px;
            }
            
            .card-container {
                height: 320px;
            }
            
            .stat-card p {
                font-size: 1.8rem;
            }
            
            .document-icon {
                font-size: 3.5rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;paper-texture&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;page-corner&quot;&gt;&lt;/div&gt;
        
        &lt;div class=&quot;header&quot;&gt;
            &lt;h1&gt;&lt;i class=&quot;fas fa-book-open&quot;&gt;&lt;/i&gt; 文档与证件单词闪卡&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot;&gt;学习各种文档、证件和出版物的英语单词 - 点击卡片翻转，点击喇叭听发音&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;剩余单词&lt;/h3&gt;
                &lt;p id=&quot;remaining-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;已掌握&lt;/h3&gt;
                &lt;p id=&quot;known-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;需复习&lt;/h3&gt;
                &lt;p id=&quot;review-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;i class=&quot;fas fa-file-alt document-icon top-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-passport document-icon top-right&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-newspaper document-icon bottom-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-sticky-note document-icon bottom-right&quot;&gt;&lt;/i&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;passport&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈpɑːspɔːt/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;sound-btn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;护照&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;You need a valid passport to travel abroad.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo-alt&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;
                &lt;!-- 复习单词将在这里显示 --&gt;
            &lt;/div&gt;
            &lt;div class=&quot;review-controls&quot;&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 全部复习
                &lt;/button&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-arrow-right&quot;&gt;&lt;/i&gt; 继续学习
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 文档与证件单词数据库
        const words = [
            { word: &quot;Ad/advertisement&quot;, phonetic: &quot;/əd/ /ədˈvɜːtɪsmənt/&quot;, meaning: &quot;广告&quot;, example: &quot;I saw an interesting ad in the newspaper.&quot; },
            { word: &quot;article&quot;, phonetic: &quot;/ˈɑːtɪkl/&quot;, meaning: &quot;文章&quot;, example: &quot;She wrote an article about climate change.&quot; },
            { word: &quot;bill&quot;, phonetic: &quot;/bɪl/&quot;, meaning: &quot;账单；法案&quot;, example: &quot;The waiter brought the bill after dinner.&quot; },
            { word: &quot;book&quot;, phonetic: &quot;/bʊk/&quot;, meaning: &quot;书&quot;, example: &quot;I&#x27;m reading a fascinating book about history.&quot; },
            { word: &quot;card&quot;, phonetic: &quot;/kɑːd/&quot;, meaning: &quot;卡片&quot;, example: &quot;He sent me a birthday card last week.&quot; },
            { word: &quot;comic&quot;, phonetic: &quot;/ˈkɒmɪk/&quot;, meaning: &quot;漫画&quot;, example: &quot;Children enjoy reading comic books.&quot; },
            { word: &quot;diary&quot;, phonetic: &quot;/ˈdaɪəri/&quot;, meaning: &quot;日记&quot;, example: &quot;She keeps a diary to record her thoughts.&quot; },
            { word: &quot;diploma&quot;, phonetic: &quot;/dɪˈpləʊmə/&quot;, meaning: &quot;文凭&quot;, example: &quot;He received his diploma after four years of study.&quot; },
            { word: &quot;email&quot;, phonetic: &quot;/ˈiːmeɪl/&quot;, meaning: &quot;电子邮件&quot;, example: &quot;I&#x27;ll send you an email with the details.&quot; },
            { word: &quot;form&quot;, phonetic: &quot;/fɔːm/&quot;, meaning: &quot;表格&quot;, example: &quot;Please fill out this application form.&quot; },
            { word: &quot;letter&quot;, phonetic: &quot;/ˈletə/&quot;, meaning: &quot;信&quot;, example: &quot;She wrote a letter to her grandmother.&quot; },
            { word: &quot;licence&quot;, phonetic: &quot;/ˈlaɪsns/&quot;, meaning: &quot;许可证&quot;, example: &quot;You need a driving licence to operate a car.&quot; },
            { word: &quot;magazine&quot;, phonetic: &quot;/ˌmæɡəˈziːn/&quot;, meaning: &quot;杂志&quot;, example: &quot;I bought a fashion magazine at the airport.&quot; },
            { word: &quot;menu&quot;, phonetic: &quot;/ˈmenjuː/&quot;, meaning: &quot;菜单&quot;, example: &quot;The restaurant menu had many delicious options.&quot; },
            { word: &quot;message&quot;, phonetic: &quot;/ˈmesɪdʒ/&quot;, meaning: &quot;消息&quot;, example: &quot;I left a message on your voicemail.&quot; },
            { word: &quot;newspaper&quot;, phonetic: &quot;/ˈnjuːzpeɪpə/&quot;, meaning: &quot;报纸&quot;, example: &quot;He reads the newspaper every morning.&quot; },
            { word: &quot;note&quot;, phonetic: &quot;/nəʊt/&quot;, meaning: &quot;笔记；便条&quot;, example: &quot;She left a note on the kitchen table.&quot; },
            { word: &quot;notebook&quot;, phonetic: &quot;/ˈnəʊtbʊk/&quot;, meaning: &quot;笔记本&quot;, example: &quot;Students use notebooks to take notes in class.&quot; },
            { word: &quot;notice&quot;, phonetic: &quot;/ˈnəʊtɪs/&quot;, meaning: &quot;通知&quot;, example: &quot;The notice on the door said &#x27;Closed for Renovation&#x27;.&quot; },
            { word: &quot;passport&quot;, phonetic: &quot;/ˈpɑːspɔːt/&quot;, meaning: &quot;护照&quot;, example: &quot;You need a valid passport to travel abroad.&quot; },
            { word: &quot;postcard&quot;, phonetic: &quot;/ˈpəʊstkɑːd/&quot;, meaning: &quot;明信片&quot;, example: &quot;I sent a postcard from my vacation in Paris.&quot; },
            { word: &quot;project&quot;, phonetic: &quot;/ˈprɒdʒekt/&quot;, meaning: &quot;项目&quot;, example: &quot;Our team is working on an important project.&quot; },
            { word: &quot;sign&quot;, phonetic: &quot;/saɪn/&quot;, meaning: &quot;标志；签名&quot;, example: &quot;The sign said &#x27;No Parking&#x27;.&quot; },
            { word: &quot;text (n &amp; v)&quot;, phonetic: &quot;/tekst/&quot;, meaning: &quot;文本；发短信&quot;, example: &quot;I&#x27;ll send you a text with the address.&quot; },
            { word: &quot;textbook&quot;, phonetic: &quot;/ˈtekstbʊk/&quot;, meaning: &quot;教科书&quot;, example: &quot;The textbook for this course is very expensive.&quot; },
            { word: &quot;ticket&quot;, phonetic: &quot;/ˈtɪkɪt/&quot;, meaning: &quot;票&quot;, example: &quot;I bought two tickets for the concert.&quot; }
        ];

        // 应用状态
        const state = {
            allWords: [...words],
            remainingWords: [...words],
            knownWords: [],
            reviewWords: [],
            currentWord: null,
            speechSynth: window.speechSynthesis,
            utterance: null
        };

        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;sound-btn&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const remainingCount = document.getElementById(&#x27;remaining-count&#x27;);
        const knownCount = document.getElementById(&#x27;known-count&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);

        // 初始化
        function init() {
            updateStats();
            nextWord();
            
            // 事件监听
            card.addEventListener(&#x27;click&#x27;, flipCard);
            soundBtn.addEventListener(&#x27;click&#x27;, playSound);
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;unsure&#x27;));
            dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;dont-know&#x27;));
            reviewAllBtn.addEventListener(&#x27;click&#x27;, reviewAll);
            continueBtn.addEventListener(&#x27;click&#x27;, hideReviewSection);
        }

        // 翻转卡片
        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        // 播放发音
        function playSound() {
            if (state.currentWord) {
                // 停止任何正在进行的发音
                if (state.speechSynth.speaking) {
                    state.speechSynth.cancel();
                }
                
                // 添加脉冲动画
                soundBtn.classList.add(&#x27;pulse&#x27;);
                
                // 创建新的发音实例
                state.utterance = new SpeechSynthesisUtterance(state.currentWord.word);
                state.utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                state.utterance.pitch = 1; // 音调
                state.utterance.rate = 0.9; // 语速
                
                // 发音结束后的回调
                state.utterance.onend = function() {
                    soundBtn.classList.remove(&#x27;pulse&#x27;);
                };
                
                // 播放发音
                state.speechSynth.speak(state.utterance);
            }
        }

        // 获取随机单词
        function getRandomWord() {
            if (state.remainingWords.length === 0) {
                if (state.reviewWords.length &gt; 0) {
                    showReviewSection();
                    return null;
                }
                return null; // 所有单词都学完了
            }
            
            const randomIndex = Math.floor(Math.random() * state.remainingWords.length);
            return state.remainingWords[randomIndex];
        }

        // 显示下一个单词
        function nextWord() {
            const word = getRandomWord();
            if (!word) {
                // 所有单词都学完了
                wordEl.textContent = &quot;恭喜！&quot;;
                phoneticEl.textContent = &quot;你已经学完了所有单词&quot;;
                meaningEl.textContent = &quot;&quot;;
                exampleEl.textContent = &quot;&quot;;
                return;
            }
            
            state.currentWord = word;
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = word.example;
            
            // 确保卡片是正面朝上
            card.classList.remove(&#x27;flipped&#x27;);
            
            updateStats();
        }

        // 处理用户响应
        function handleResponse(response) {
            if (!state.currentWord) return;
            
            const word = state.currentWord;
            
            // 从剩余单词中移除
            state.remainingWords = state.remainingWords.filter(w =&gt; w.word !== word.word);
            
            // 根据响应处理
            if (response === &#x27;known&#x27;) {
                state.knownWords.push(word);
            } else {
                // 避免重复添加
                if (!state.reviewWords.some(w =&gt; w.word === word.word)) {
                    state.reviewWords.push(word);
                }
            }
            
            nextWord();
        }

        // 显示复习部分
        function showReviewSection() {
            // 更新复习单词显示
            reviewWordsContainer.innerHTML = &#x27;&#x27;;
            state.reviewWords.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 点击复习单词时显示该单词
                    state.currentWord = word;
                    wordEl.textContent = word.word;
                    phoneticEl.textContent = word.phonetic;
                    meaningEl.textContent = word.meaning;
                    exampleEl.textContent = word.example;
                    card.classList.remove(&#x27;flipped&#x27;);
                    hideReviewSection();
                });
                reviewWordsContainer.appendChild(wordEl);
            });
            
            reviewSection.style.display = &#x27;block&#x27;;
        }

        // 隐藏复习部分
        function hideReviewSection() {
            reviewSection.style.display = &#x27;none&#x27;;
            // 将复习单词放回剩余单词列表
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            nextWord();
        }

        // 复习所有单词
        function reviewAll() {
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            hideReviewSection();
        }

        // 更新统计数据
        function updateStats() {
            remainingCount.textContent = state.remainingWords.length;
            knownCount.textContent = state.knownWords.length;
            reviewCount.textContent = state.reviewWords.length;
            
            // 更新进度条
            const totalWords = state.allWords.length;
            const learnedWords = state.knownWords.length;
            const progress = (learnedWords / totalWords) * 100;
            progressBar.style.width = `${progress}%`;
        }

        // 初始化应用
        document.addEventListener(&#x27;DOMContentLoaded&#x27;, init);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="6-教育" class="section">
      <div class="section-header">
        <h2>6 教育</h2>
        <div class="section-actions">
          <button onclick="openStandalone('6 教育.html')">打开原文件</button>
          <button onclick="toggleHeight('6-教育')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;教育学习单词闪卡系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&amp;family=Quicksand:wght@500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#x27;Nunito&#x27;, sans-serif;
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #2c3e50;
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background: linear-gradient(to bottom, #ffffff, #f5f7fa);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            padding: 35px;
            position: relative;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 10;
        }
        
        h1 {
            color: #3498db;
            font-family: &#x27;Quicksand&#x27;, sans-serif;
            font-size: 3.2rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        h1:after {
            content: &#x27;&#x27;;
            display: block;
            width: 60%;
            height: 4px;
            background: linear-gradient(to right, #3498db, #2c3e50);
            margin: 15px auto 0;
            border-radius: 2px;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto 20px;
            font-weight: 500;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            background: rgba(52, 152, 219, 0.15);
            padding: 18px;
            border-radius: 15px;
            margin: 25px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(52, 152, 219, 0.2);
        }
        
        .stat-card {
            text-align: center;
            padding: 12px;
            flex: 1;
        }
        
        .stat-card h3 {
            font-size: 1.1rem;
            color: #2c3e50;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .stat-card p {
            font-size: 2.2rem;
            font-weight: 700;
            color: #3498db;
            font-family: &#x27;Quicksand&#x27;, sans-serif;
        }
        
        .progress-container {
            width: 100%;
            background: #e0e7ef;
            border-radius: 10px;
            margin: 20px 0;
            height: 16px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #3498db, #2980b9);
            border-radius: 10px;
            width: 0%;
            transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        
        .card-container {
            perspective: 1500px;
            height: 380px;
            margin: 30px 0;
            position: relative;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 35px;
            border-radius: 15px;
            overflow: hidden;
        }
        
        .card-front {
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            border: 2px solid #e3e8f1;
        }
        
        .card-back {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: #2c3e50;
            text-align: center;
            font-family: &#x27;Quicksand&#x27;, sans-serif;
        }
        
        .phonetic {
            font-size: 1.6rem;
            color: #7f8c8d;
            margin-bottom: 30px;
            font-weight: 500;
        }
        
        .sound-btn {
            background: #3498db;
            color: white;
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
            transition: all 0.3s ease;
            position: relative;
            z-index: 10;
        }
        
        .sound-btn:hover {
            transform: scale(1.08);
            background: #2980b9;
            box-shadow: 0 10px 25px rgba(41, 128, 185, 0.6);
        }
        
        .sound-btn.pulse {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .meaning {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .example {
            font-size: 1.4rem;
            text-align: center;
            line-height: 1.7;
            max-width: 90%;
            background: rgba(255, 255, 255, 0.2);
            padding: 15px 25px;
            border-radius: 12px;
            backdrop-filter: blur(5px);
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 15px;
        }
        
        .btn {
            flex: 1;
            padding: 18px 25px;
            border: none;
            border-radius: 12px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12);
        }
        
        .btn i {
            margin-right: 12px;
            font-size: 1.5rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #2ecc71, #27ae60);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #f39c12, #d35400);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
        }
        
        .btn:active {
            transform: translateY(2px);
        }
        
        .review-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 30px;
            margin-top: 35px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: none;
            border: 1px solid rgba(52, 152, 219, 0.2);
        }
        
        .review-section h2 {
            color: #3498db;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.2rem;
            font-weight: 700;
            font-family: &#x27;Quicksand&#x27;, sans-serif;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .review-word {
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }
        
        .review-word:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .review-btn {
            padding: 15px 35px;
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 7px 20px rgba(52, 152, 219, 0.3);
        }
        
        .review-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(52, 152, 219, 0.4);
        }
        
        .flip-hint {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: #7f8c8d;
            font-size: 1.1rem;
            animation: pulse 2s infinite;
        }
        
        .edu-icon {
            position: absolute;
            font-size: 5rem;
            opacity: 0.1;
            z-index: 0;
            color: #3498db;
        }
        
        .edu-icon.top-left {
            top: 20px;
            left: 20px;
        }
        
        .edu-icon.top-right {
            top: 20px;
            right: 20px;
        }
        
        .edu-icon.bottom-left {
            bottom: 20px;
            left: 20px;
        }
        
        .edu-icon.bottom-right {
            bottom: 20px;
            right: 20px;
        }
        
        .pencil-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(&quot;data:image/svg+xml,%3Csvg width=&#x27;100&#x27; height=&#x27;100&#x27; viewBox=&#x27;0 0 100 100&#x27; xmlns=&#x27;http://www.w3.org/2000/svg&#x27;%3E%3Cpath d=&#x27;M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z&#x27; fill=&#x27;%233498db&#x27; fill-opacity=&#x27;0.1&#x27; fill-rule=&#x27;evenodd&#x27;/%3E%3C/svg%3E&quot;);
            opacity: 0.1;
            pointer-events: none;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.4rem;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .meaning {
                font-size: 2.0rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                padding: 16px;
            }
            
            .card-container {
                height: 320px;
            }
            
            .stat-card p {
                font-size: 1.8rem;
            }
            
            .edu-icon {
                font-size: 3.5rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;pencil-bg&quot;&gt;&lt;/div&gt;
        
        &lt;div class=&quot;header&quot;&gt;
            &lt;h1&gt;&lt;i class=&quot;fas fa-graduation-cap&quot;&gt;&lt;/i&gt; 教育学习单词闪卡&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot;&gt;学习与学校和教育相关的英语单词 - 点击卡片翻转，点击喇叭听发音&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;剩余单词&lt;/h3&gt;
                &lt;p id=&quot;remaining-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;已掌握&lt;/h3&gt;
                &lt;p id=&quot;known-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;需复习&lt;/h3&gt;
                &lt;p id=&quot;review-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;i class=&quot;fas fa-book edu-icon top-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-pencil-alt edu-icon top-right&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-calculator edu-icon bottom-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-flask edu-icon bottom-right&quot;&gt;&lt;/i&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;university&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˌjuːnɪˈvɜːrsɪti/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;sound-btn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;大学&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;She studied physics at a prestigious university.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo-alt&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;
                &lt;!-- 复习单词将在这里显示 --&gt;
            &lt;/div&gt;
            &lt;div class=&quot;review-controls&quot;&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 全部复习
                &lt;/button&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-arrow-right&quot;&gt;&lt;/i&gt; 继续学习
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 教育学习单词数据库
        const words = [
            { word: &quot;advanced&quot;, phonetic: &quot;/ədˈvɑːnst/&quot;, meaning: &quot;高级的&quot;, example: &quot;She is taking an advanced mathematics course.&quot; },
            { word: &quot;beginner&quot;, phonetic: &quot;/bɪˈɡɪnər/&quot;, meaning: &quot;初学者&quot;, example: &quot;This class is suitable for beginners.&quot; },
            { word: &quot;biology&quot;, phonetic: &quot;/baɪˈɒlədʒi/&quot;, meaning: &quot;生物学&quot;, example: &quot;We studied plant cells in biology class.&quot; },
            { word: &quot;blackboard&quot;, phonetic: &quot;/ˈblækbɔːd/&quot;, meaning: &quot;黑板&quot;, example: &quot;The teacher wrote the assignment on the blackboard.&quot; },
            { word: &quot;board&quot;, phonetic: &quot;/bɔːd/&quot;, meaning: &quot;板；董事会&quot;, example: &quot;The exam results were posted on the notice board.&quot; },
            { word: &quot;book&quot;, phonetic: &quot;/bʊk/&quot;, meaning: &quot;书&quot;, example: &quot;I borrowed a history book from the library.&quot; },
            { word: &quot;bookshelf&quot;, phonetic: &quot;/ˈbʊkʃelf/&quot;, meaning: &quot;书架&quot;, example: &quot;He organized his textbooks on the bookshelf.&quot; },
            { word: &quot;chemistry&quot;, phonetic: &quot;/ˈkemɪstri/&quot;, meaning: &quot;化学&quot;, example: &quot;Chemistry was my favorite subject in high school.&quot; },
            { word: &quot;class&quot;, phonetic: &quot;/klɑːs/&quot;, meaning: &quot;班级；课&quot;, example: &quot;Our English class starts at 9 AM.&quot; },
            { word: &quot;classmate&quot;, phonetic: &quot;/ˈklɑːsmeɪt/&quot;, meaning: &quot;同学&quot;, example: &quot;I worked on the project with my classmate.&quot; },
            { word: &quot;classroom&quot;, phonetic: &quot;/ˈklɑːsruːm/&quot;, meaning: &quot;教室&quot;, example: &quot;The classroom was equipped with modern technology.&quot; },
            { word: &quot;clever&quot;, phonetic: &quot;/ˈklevər/&quot;, meaning: &quot;聪明的&quot;, example: &quot;She is a clever student who asks insightful questions.&quot; },
            { word: &quot;coach&quot;, phonetic: &quot;/kəʊtʃ/&quot;, meaning: &quot;教练&quot;, example: &quot;The basketball coach trained the team every afternoon.&quot; },
            { word: &quot;college&quot;, phonetic: &quot;/ˈkɒlɪdʒ/&quot;, meaning: &quot;学院&quot;, example: &quot;He plans to attend college after high school.&quot; },
            { word: &quot;course&quot;, phonetic: &quot;/kɔːs/&quot;, meaning: &quot;课程&quot;, example: &quot;I&#x27;m taking a course in computer programming.&quot; },
            { word: &quot;desk&quot;, phonetic: &quot;/desk/&quot;, meaning: &quot;书桌&quot;, example: &quot;Each student has their own desk in the classroom.&quot; },
            { word: &quot;dictionary&quot;, phonetic: &quot;/ˈdɪkʃənri/&quot;, meaning: &quot;词典&quot;, example: &quot;Look up the word in your dictionary.&quot; },
            { word: &quot;diploma&quot;, phonetic: &quot;/dɪˈpləʊmə/&quot;, meaning: &quot;文凭&quot;, example: &quot;She received her diploma with honors.&quot; },
            { word: &quot;eraser&quot;, phonetic: &quot;/ɪˈreɪzər/&quot;, meaning: &quot;橡皮擦&quot;, example: &quot;Can I borrow your eraser? I made a mistake.&quot; },
            { word: &quot;exam(ination)&quot;, phonetic: &quot;/ɪɡˌzæmɪˈneɪʃn/&quot;, meaning: &quot;考试&quot;, example: &quot;The final examination will cover all chapters.&quot; },
            { word: &quot;geography&quot;, phonetic: &quot;/dʒiˈɒɡrəfi/&quot;, meaning: &quot;地理&quot;, example: &quot;In geography, we learned about different countries.&quot; },
            { word: &quot;history&quot;, phonetic: &quot;/ˈhɪstri/&quot;, meaning: &quot;历史&quot;, example: &quot;Ancient history is my favorite topic to study.&quot; },
            { word: &quot;homework&quot;, phonetic: &quot;/ˈhəʊmwɜːk/&quot;, meaning: &quot;家庭作业&quot;, example: &quot;Don&#x27;t forget to do your math homework.&quot; },
            { word: &quot;information&quot;, phonetic: &quot;/ˌɪnfəˈmeɪʃn/&quot;, meaning: &quot;信息&quot;, example: &quot;The library has valuable information for your research.&quot; },
            { word: &quot;instructions&quot;, phonetic: &quot;/ɪnˈstrʌkʃnz/&quot;, meaning: &quot;说明&quot;, example: &quot;Follow the instructions carefully for the experiment.&quot; },
            { word: &quot;know&quot;, phonetic: &quot;/nəʊ/&quot;, meaning: &quot;知道&quot;, example: &quot;Do you know the answer to question three?&quot; },
            { word: &quot;language&quot;, phonetic: &quot;/ˈlæŋɡwɪdʒ/&quot;, meaning: &quot;语言&quot;, example: &quot;Learning a new language can be challenging.&quot; },
            { word: &quot;learn&quot;, phonetic: &quot;/lɜːn/&quot;, meaning: &quot;学习&quot;, example: &quot;Children learn quickly through play.&quot; },
            { word: &quot;lesson&quot;, phonetic: &quot;/ˈlesn/&quot;, meaning: &quot;课&quot;, example: &quot;Today&#x27;s lesson is about the solar system.&quot; },
            { word: &quot;level&quot;, phonetic: &quot;/ˈlevl/&quot;, meaning: &quot;水平&quot;, example: &quot;This course is for intermediate level students.&quot; },
            { word: &quot;library&quot;, phonetic: &quot;/ˈlaɪbrəri/&quot;, meaning: &quot;图书馆&quot;, example: &quot;I spend hours studying in the university library.&quot; },
            { word: &quot;mark&quot;, phonetic: &quot;/mɑːk/&quot;, meaning: &quot;分数&quot;, example: &quot;She got high marks on her science test.&quot; },
            { word: &quot;maths/mathematics&quot;, phonetic: &quot;/mæθs/ /ˌmæθəˈmætɪks/&quot;, meaning: &quot;数学&quot;, example: &quot;Mathematics helps develop logical thinking skills.&quot; },
            { word: &quot;note&quot;, phonetic: &quot;/nəʊt/&quot;, meaning: &quot;笔记&quot;, example: &quot;Take notes during the lecture to review later.&quot; },
            { word: &quot;physics&quot;, phonetic: &quot;/ˈfɪzɪks/&quot;, meaning: &quot;物理&quot;, example: &quot;Physics explains how the universe works.&quot; },
            { word: &quot;practice (n)&quot;, phonetic: &quot;/ˈpræktɪs/&quot;, meaning: &quot;练习&quot;, example: &quot;Regular practice improves your language skills.&quot; },
            { word: &quot;practice (v)&quot;, phonetic: &quot;/ˈpræktɪs/&quot;, meaning: &quot;练习&quot;, example: &quot;You need to practice speaking English every day.&quot; },
            { word: &quot;project&quot;, phonetic: &quot;/ˈprɒdʒekt/&quot;, meaning: &quot;项目&quot;, example: &quot;Our group project is about renewable energy.&quot; },
            { word: &quot;pupil&quot;, phonetic: &quot;/ˈpjuːpl/&quot;, meaning: &quot;学生&quot;, example: &quot;The pupils were excited about the field trip.&quot; },
            { word: &quot;read&quot;, phonetic: &quot;/riːd/&quot;, meaning: &quot;阅读&quot;, example: &quot;Students should read at least 30 minutes daily.&quot; },
            { word: &quot;remember&quot;, phonetic: &quot;/rɪˈmembər/&quot;, meaning: &quot;记住&quot;, example: &quot;Try to remember these important dates for the test.&quot; },
            { word: &quot;rubber&quot;, phonetic: &quot;/ˈrʌbər/&quot;, meaning: &quot;橡皮&quot;, example: &quot;I need a rubber to correct my pencil drawing.&quot; },
            { word: &quot;ruler&quot;, phonetic: &quot;/ˈruːlər/&quot;, meaning: &quot;尺子&quot;, example: &quot;Use a ruler to draw straight lines.&quot; },
            { word: &quot;school&quot;, phonetic: &quot;/skuːl/&quot;, meaning: &quot;学校&quot;, example: &quot;Children start school at age five in this country.&quot; },
            { word: &quot;science&quot;, phonetic: &quot;/ˈsaɪəns/&quot;, meaning: &quot;科学&quot;, example: &quot;Science classes include experiments and observations.&quot; },
            { word: &quot;student&quot;, phonetic: &quot;/ˈstjuːdnt/&quot;, meaning: &quot;学生&quot;, example: &quot;Every student must complete the assignment.&quot; },
            { word: &quot;studies&quot;, phonetic: &quot;/ˈstʌdiz/&quot;, meaning: &quot;学习&quot;, example: &quot;Her studies focus on environmental science.&quot; },
            { word: &quot;study (v)&quot;, phonetic: &quot;/ˈstʌdi/&quot;, meaning: &quot;学习&quot;, example: &quot;I need to study for tomorrow&#x27;s history exam.&quot; },
            { word: &quot;subject&quot;, phonetic: &quot;/ˈsʌbdʒɪkt/&quot;, meaning: &quot;学科&quot;, example: &quot;Mathematics is my best subject.&quot; },
            { word: &quot;teach&quot;, phonetic: &quot;/tiːtʃ/&quot;, meaning: &quot;教&quot;, example: &quot;Mr. Smith teaches chemistry at our school.&quot; },
            { word: &quot;teacher&quot;, phonetic: &quot;/ˈtiːtʃər/&quot;, meaning: &quot;老师&quot;, example: &quot;Our English teacher is very knowledgeable.&quot; },
            { word: &quot;term&quot;, phonetic: &quot;/tɜːm/&quot;, meaning: &quot;学期&quot;, example: &quot;The spring term begins in January.&quot; },
            { word: &quot;test (n)&quot;, phonetic: &quot;/test/&quot;, meaning: &quot;测试&quot;, example: &quot;We have a vocabulary test every Friday.&quot; },
            { word: &quot;university&quot;, phonetic: &quot;/ˌjuːnɪˈvɜːrsɪti/&quot;, meaning: &quot;大学&quot;, example: &quot;She studied physics at a prestigious university.&quot; }
        ];

        // 应用状态
        const state = {
            allWords: [...words],
            remainingWords: [...words],
            knownWords: [],
            reviewWords: [],
            currentWord: null,
            speechSynth: window.speechSynthesis,
            utterance: null
        };

        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;sound-btn&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const remainingCount = document.getElementById(&#x27;remaining-count&#x27;);
        const knownCount = document.getElementById(&#x27;known-count&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);

        // 初始化
        function init() {
            updateStats();
            nextWord();
            
            // 事件监听
            card.addEventListener(&#x27;click&#x27;, flipCard);
            soundBtn.addEventListener(&#x27;click&#x27;, playSound);
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;unsure&#x27;));
            dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;dont-know&#x27;));
            reviewAllBtn.addEventListener(&#x27;click&#x27;, reviewAll);
            continueBtn.addEventListener(&#x27;click&#x27;, hideReviewSection);
        }

        // 翻转卡片
        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        // 播放发音
        function playSound() {
            if (state.currentWord) {
                // 停止任何正在进行的发音
                if (state.speechSynth.speaking) {
                    state.speechSynth.cancel();
                }
                
                // 添加脉冲动画
                soundBtn.classList.add(&#x27;pulse&#x27;);
                
                // 创建新的发音实例
                state.utterance = new SpeechSynthesisUtterance(state.currentWord.word);
                state.utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                state.utterance.pitch = 1; // 音调
                state.utterance.rate = 0.9; // 语速
                
                // 发音结束后的回调
                state.utterance.onend = function() {
                    soundBtn.classList.remove(&#x27;pulse&#x27;);
                };
                
                // 播放发音
                state.speechSynth.speak(state.utterance);
            }
        }

        // 获取随机单词
        function getRandomWord() {
            if (state.remainingWords.length === 0) {
                if (state.reviewWords.length &gt; 0) {
                    showReviewSection();
                    return null;
                }
                return null; // 所有单词都学完了
            }
            
            const randomIndex = Math.floor(Math.random() * state.remainingWords.length);
            return state.remainingWords[randomIndex];
        }

        // 显示下一个单词
        function nextWord() {
            const word = getRandomWord();
            if (!word) {
                // 所有单词都学完了
                wordEl.textContent = &quot;恭喜！&quot;;
                phoneticEl.textContent = &quot;你已经学完了所有单词&quot;;
                meaningEl.textContent = &quot;&quot;;
                exampleEl.textContent = &quot;&quot;;
                return;
            }
            
            state.currentWord = word;
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = word.example;
            
            // 确保卡片是正面朝上
            card.classList.remove(&#x27;flipped&#x27;);
            
            updateStats();
        }

        // 处理用户响应
        function handleResponse(response) {
            if (!state.currentWord) return;
            
            const word = state.currentWord;
            
            // 从剩余单词中移除
            state.remainingWords = state.remainingWords.filter(w =&gt; w.word !== word.word);
            
            // 根据响应处理
            if (response === &#x27;known&#x27;) {
                state.knownWords.push(word);
            } else {
                // 避免重复添加
                if (!state.reviewWords.some(w =&gt; w.word === word.word)) {
                    state.reviewWords.push(word);
                }
            }
            
            nextWord();
        }

        // 显示复习部分
        function showReviewSection() {
            // 更新复习单词显示
            reviewWordsContainer.innerHTML = &#x27;&#x27;;
            state.reviewWords.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 点击复习单词时显示该单词
                    state.currentWord = word;
                    wordEl.textContent = word.word;
                    phoneticEl.textContent = word.phonetic;
                    meaningEl.textContent = word.meaning;
                    exampleEl.textContent = word.example;
                    card.classList.remove(&#x27;flipped&#x27;);
                    hideReviewSection();
                });
                reviewWordsContainer.appendChild(wordEl);
            });
            
            reviewSection.style.display = &#x27;block&#x27;;
        }

        // 隐藏复习部分
        function hideReviewSection() {
            reviewSection.style.display = &#x27;none&#x27;;
            // 将复习单词放回剩余单词列表
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            nextWord();
        }

        // 复习所有单词
        function reviewAll() {
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            hideReviewSection();
        }

        // 更新统计数据
        function updateStats() {
            remainingCount.textContent = state.remainingWords.length;
            knownCount.textContent = state.knownWords.length;
            reviewCount.textContent = state.reviewWords.length;
            
            // 更新进度条
            const totalWords = state.allWords.length;
            const learnedWords = state.knownWords.length;
            const progress = (learnedWords / totalWords) * 100;
            progressBar.style.width = `${progress}%`;
        }

        // 初始化应用
        document.addEventListener(&#x27;DOMContentLoaded&#x27;, init);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="7-娱乐与媒体" class="section">
      <div class="section-header">
        <h2>7 娱乐与媒体</h2>
        <div class="section-actions">
          <button onclick="openStandalone('7 娱乐与媒体.html')">打开原文件</button>
          <button onclick="toggleHeight('7-娱乐与媒体')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;娱乐与媒体单词闪卡学习系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;family=Raleway:wght@700;800&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#x27;Poppins&#x27;, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
            overflow-x: hidden;
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            padding: 35px;
            position: relative;
            z-index: 10;
        }
        
        .media-header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
        }
        
        h1 {
            color: #8e44ad;
            font-family: &#x27;Raleway&#x27;, sans-serif;
            font-size: 3.2rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        h1:after {
            content: &#x27;&#x27;;
            display: block;
            width: 60%;
            height: 4px;
            background: linear-gradient(to right, #9b59b6, #3498db);
            margin: 15px auto 0;
            border-radius: 2px;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto 20px;
            font-weight: 500;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            background: linear-gradient(to right, #9b59b6, #3498db);
            padding: 18px;
            border-radius: 15px;
            margin: 25px 0;
            box-shadow: 0 8px 20px rgba(155, 89, 182, 0.3);
        }
        
        .stat-card {
            text-align: center;
            padding: 12px;
            flex: 1;
        }
        
        .stat-card h3 {
            font-size: 1.1rem;
            color: #fff;
            margin-bottom: 8px;
            font-weight: 400;
        }
        
        .stat-card p {
            font-size: 2.2rem;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .progress-container {
            width: 100%;
            background: #e0e7ef;
            border-radius: 10px;
            margin: 20px 0;
            height: 16px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #9b59b6, #3498db);
            border-radius: 10px;
            width: 0%;
            transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        
        .card-container {
            perspective: 1500px;
            height: 380px;
            margin: 30px 0;
            position: relative;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
            cursor: pointer;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 35px;
            border-radius: 20px;
            overflow: hidden;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 2px solid #f0f0f0;
        }
        
        .card-back {
            background: linear-gradient(45deg, #9b59b6, #3498db);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: #8e44ad;
            text-align: center;
            font-family: &#x27;Raleway&#x27;, sans-serif;
        }
        
        .phonetic {
            font-size: 1.6rem;
            color: #7f8c8d;
            margin-bottom: 30px;
            font-weight: 500;
        }
        
        .sound-btn {
            background: linear-gradient(to right, #9b59b6, #3498db);
            color: white;
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 20px rgba(155, 89, 182, 0.4);
            transition: all 0.3s ease;
            position: relative;
            z-index: 10;
        }
        
        .sound-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 10px 25px rgba(155, 89, 182, 0.6);
        }
        
        .sound-btn.pulse {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .meaning {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .example {
            font-size: 1.4rem;
            font-style: italic;
            text-align: center;
            line-height: 1.7;
            max-width: 90%;
            background: rgba(255, 255, 255, 0.15);
            padding: 15px 25px;
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 15px;
        }
        
        .btn {
            flex: 1;
            padding: 18px 25px;
            border: none;
            border-radius: 15px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
        }
        
        .btn i {
            margin-right: 12px;
            font-size: 1.5rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #2ecc71, #27ae60);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #f39c12, #d35400);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(2px);
        }
        
        .review-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            margin-top: 35px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: none;
        }
        
        .review-section h2 {
            color: #8e44ad;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.2rem;
            font-weight: 700;
            font-family: &#x27;Raleway&#x27;, sans-serif;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .review-word {
            background: linear-gradient(to right, #9b59b6, #3498db);
            color: white;
            padding: 12px 25px;
            border-radius: 35px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(155, 89, 182, 0.3);
        }
        
        .review-word:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(155, 89, 182, 0.4);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .review-btn {
            padding: 15px 35px;
            background: linear-gradient(to right, #9b59b6, #3498db);
            color: white;
            border: none;
            border-radius: 35px;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 7px 20px rgba(155, 89, 182, 0.3);
        }
        
        .review-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(155, 89, 182, 0.4);
        }
        
        .flip-hint {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: #7f8c8d;
            font-size: 1.1rem;
            animation: pulse 2s infinite;
        }
        
        .media-icon {
            position: absolute;
            font-size: 5rem;
            opacity: 0.1;
            z-index: 0;
            color: #9b59b6;
        }
        
        .media-icon.top-left {
            top: 20px;
            left: 20px;
        }
        
        .media-icon.top-right {
            top: 20px;
            right: 20px;
        }
        
        .media-icon.bottom-left {
            bottom: 20px;
            left: 20px;
        }
        
        .media-icon.bottom-right {
            bottom: 20px;
            right: 20px;
        }
        
        .stage-lights {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }
        
        .light-beam {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            filter: blur(30px);
            animation: moveLight 15s infinite linear;
            opacity: 0.15;
        }
        
        .light-beam:nth-child(1) {
            background: #9b59b6;
            top: -50px;
            left: -50px;
            animation-delay: 0s;
        }
        
        .light-beam:nth-child(2) {
            background: #3498db;
            bottom: -50px;
            right: -50px;
            animation-delay: -5s;
        }
        
        .light-beam:nth-child(3) {
            background: #e74c3c;
            top: 30%;
            right: -50px;
            animation-delay: -10s;
        }
        
        @keyframes moveLight {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(100px, 50px) rotate(90deg); }
            50% { transform: translate(50px, 100px) rotate(180deg); }
            75% { transform: translate(-50px, 50px) rotate(270deg); }
            100% { transform: translate(0, 0) rotate(360deg); }
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.4rem;
            }
            
            .word {
                font-size: 2.8rem;
            }
            
            .meaning {
                font-size: 2.2rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                padding: 16px;
            }
            
            .card-container {
                height: 320px;
            }
            
            .stat-card p {
                font-size: 1.8rem;
            }
            
            .media-icon {
                font-size: 3.5rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;stage-lights&quot;&gt;
        &lt;div class=&quot;light-beam&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;light-beam&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;light-beam&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;media-header&quot;&gt;
            &lt;h1&gt;&lt;i class=&quot;fas fa-film&quot;&gt;&lt;/i&gt; 娱乐与媒体单词闪卡&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot;&gt;学习娱乐、媒体和艺术相关的英语单词 - 点击卡片翻转，点击喇叭听发音&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;剩余单词&lt;/h3&gt;
                &lt;p id=&quot;remaining-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;已掌握&lt;/h3&gt;
                &lt;p id=&quot;known-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;需复习&lt;/h3&gt;
                &lt;p id=&quot;review-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;i class=&quot;fas fa-music media-icon top-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-gamepad media-icon top-right&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-theater-masks media-icon bottom-left&quot;&gt;&lt;/i&gt;
                &lt;i class=&quot;fas fa-paint-brush media-icon bottom-right&quot;&gt;&lt;/i&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;concert&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈkɒnsət/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;sound-btn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;音乐会&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;We attended a rock concert last weekend.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo-alt&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;
                &lt;!-- 复习单词将在这里显示 --&gt;
            &lt;/div&gt;
            &lt;div class=&quot;review-controls&quot;&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 全部复习
                &lt;/button&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-arrow-right&quot;&gt;&lt;/i&gt; 继续学习
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 娱乐与媒体单词数据库
        const words = [
            { word: &quot;act&quot;, phonetic: &quot;/ækt/&quot;, meaning: &quot;表演&quot;, example: &quot;She will act in the school play.&quot; },
            { word: &quot;actor&quot;, phonetic: &quot;/ˈæktər/&quot;, meaning: &quot;演员&quot;, example: &quot;Tom Hanks is a famous American actor.&quot; },
            { word: &quot;adventure&quot;, phonetic: &quot;/ədˈventʃər/&quot;, meaning: &quot;冒险&quot;, example: &quot;The book is about a thrilling adventure.&quot; },
            { word: &quot;advertisement&quot;, phonetic: &quot;/ədˈvɜːtɪsmənt/&quot;, meaning: &quot;广告&quot;, example: &quot;I saw an advertisement for a new movie.&quot; },
            { word: &quot;art&quot;, phonetic: &quot;/ɑːt/&quot;, meaning: &quot;艺术&quot;, example: &quot;Modern art can be challenging to understand.&quot; },
            { word: &quot;article&quot;, phonetic: &quot;/ˈɑːtɪkl/&quot;, meaning: &quot;文章&quot;, example: &quot;I read an interesting article in the magazine.&quot; },
            { word: &quot;board game&quot;, phonetic: &quot;/ˈbɔːd ɡeɪm/&quot;, meaning: &quot;棋盘游戏&quot;, example: &quot;We played a board game last night.&quot; },
            { word: &quot;book&quot;, phonetic: &quot;/bʊk/&quot;, meaning: &quot;书&quot;, example: &quot;This book has won several literary awards.&quot; },
            { word: &quot;card&quot;, phonetic: &quot;/kɑːd/&quot;, meaning: &quot;卡片&quot;, example: &quot;He sent me a birthday card.&quot; },
            { word: &quot;cartoon&quot;, phonetic: &quot;/kɑːˈtuːn/&quot;, meaning: &quot;卡通&quot;, example: &quot;Children enjoy watching cartoons.&quot; },
            { word: &quot;CD player&quot;, phonetic: &quot;/ˌsiːˈdiː ˈpleɪə/&quot;, meaning: &quot;CD播放器&quot;, example: &quot;My old CD player still works.&quot; },
            { word: &quot;chess&quot;, phonetic: &quot;/tʃes/&quot;, meaning: &quot;国际象棋&quot;, example: &quot;They play chess every Sunday.&quot; },
            { word: &quot;cinema&quot;, phonetic: &quot;/ˈsɪnəmə/&quot;, meaning: &quot;电影院&quot;, example: &quot;We went to the cinema to see the new film.&quot; },
            { word: &quot;classical music&quot;, phonetic: &quot;/ˈklæsɪkl ˈmjuːzɪk/&quot;, meaning: &quot;古典音乐&quot;, example: &quot;She listens to classical music while studying.&quot; },
            { word: &quot;competition&quot;, phonetic: &quot;/ˌkɒmpəˈtɪʃn/&quot;, meaning: &quot;比赛&quot;, example: &quot;The dance competition was intense.&quot; },
            { word: &quot;concert&quot;, phonetic: &quot;/ˈkɒnsət/&quot;, meaning: &quot;音乐会&quot;, example: &quot;We attended a rock concert last weekend.&quot; },
            { word: &quot;dance&quot;, phonetic: &quot;/dɑːns/&quot;, meaning: &quot;舞蹈&quot;, example: &quot;They performed a traditional dance.&quot; },
            { word: &quot;dancer&quot;, phonetic: &quot;/ˈdɑːnsə/&quot;, meaning: &quot;舞者&quot;, example: &quot;She is a professional ballet dancer.&quot; },
            { word: &quot;disco&quot;, phonetic: &quot;/ˈdɪskəʊ/&quot;, meaning: &quot;迪斯科&quot;, example: &quot;We went to a disco on Saturday night.&quot; },
            { word: &quot;draw&quot;, phonetic: &quot;/drɔː/&quot;, meaning: &quot;画画&quot;, example: &quot;I like to draw in my free time.&quot; },
            { word: &quot;drawing&quot;, phonetic: &quot;/ˈdrɔːɪŋ/&quot;, meaning: &quot;图画&quot;, example: &quot;Her drawing won first prize.&quot; },
            { word: &quot;drum&quot;, phonetic: &quot;/drʌm/&quot;, meaning: &quot;鼓&quot;, example: &quot;He plays the drum in a band.&quot; },
            { word: &quot;DVD player&quot;, phonetic: &quot;/ˌdiːviːˈdiː ˈpleɪə/&quot;, meaning: &quot;DVD播放器&quot;, example: &quot;We watched the movie on our DVD player.&quot; },
            { word: &quot;exhibition&quot;, phonetic: &quot;/ˌeksɪˈbɪʃn/&quot;, meaning: &quot;展览&quot;, example: &quot;The art exhibition was fascinating.&quot; },
            { word: &quot;festival&quot;, phonetic: &quot;/ˈfestɪvl/&quot;, meaning: &quot;节日&quot;, example: &quot;The music festival lasted three days.&quot; },
            { word: &quot;film&quot;, phonetic: &quot;/fɪlm/&quot;, meaning: &quot;电影&quot;, example: &quot;This film won an Oscar for best picture.&quot; },
            { word: &quot;fun&quot;, phonetic: &quot;/fʌn/&quot;, meaning: &quot;乐趣&quot;, example: &quot;We had a lot of fun at the party.&quot; },
            { word: &quot;go out&quot;, phonetic: &quot;/ɡəʊ aʊt/&quot;, meaning: &quot;外出&quot;, example: &quot;Let&#x27;s go out to the theater tonight.&quot; },
            { word: &quot;group&quot;, phonetic: &quot;/ɡruːp/&quot;, meaning: &quot;团体&quot;, example: &quot;She joined a music group.&quot; },
            { word: &quot;guitar&quot;, phonetic: &quot;/ɡɪˈtɑː/&quot;, meaning: &quot;吉他&quot;, example: &quot;He plays the guitar very well.&quot; },
            { word: &quot;hip hop&quot;, phonetic: &quot;/ˈhɪp hɒp/&quot;, meaning: &quot;嘻哈音乐&quot;, example: &quot;Hip hop is popular among young people.&quot; },
            { word: &quot;instrument&quot;, phonetic: &quot;/ˈɪnstrəmənt/&quot;, meaning: &quot;乐器&quot;, example: &quot;The piano is my favorite instrument.&quot; },
            { word: &quot;keyboard&quot;, phonetic: &quot;/ˈkiːbɔːd/&quot;, meaning: &quot;键盘&quot;, example: &quot;She plays keyboard in the band.&quot; },
            { word: &quot;laugh&quot;, phonetic: &quot;/lɑːf/&quot;, meaning: &quot;笑&quot;, example: &quot;The comedy show made everyone laugh.&quot; },
            { word: &quot;listen to&quot;, phonetic: &quot;/ˈlɪsn tuː/&quot;, meaning: &quot;听&quot;, example: &quot;I like to listen to podcasts.&quot; },
            { word: &quot;look at&quot;, phonetic: &quot;/lʊk æt/&quot;, meaning: &quot;看&quot;, example: &quot;Look at that beautiful painting.&quot; },
            { word: &quot;magazine&quot;, phonetic: &quot;/ˌmæɡəˈziːn/&quot;, meaning: &quot;杂志&quot;, example: &quot;I bought a fashion magazine.&quot; },
            { word: &quot;MP3 player&quot;, phonetic: &quot;/ˌempiːˈθriː ˈpleɪə/&quot;, meaning: &quot;MP3播放器&quot;, example: &quot;He listens to music on his MP3 player.&quot; },
            { word: &quot;museum&quot;, phonetic: &quot;/mjuˈziːəm/&quot;, meaning: &quot;博物馆&quot;, example: &quot;We visited the science museum.&quot; },
            { word: &quot;music&quot;, phonetic: &quot;/ˈmjuːzɪk/&quot;, meaning: &quot;音乐&quot;, example: &quot;Music helps me relax.&quot; },
            { word: &quot;musician&quot;, phonetic: &quot;/mjuˈzɪʃn/&quot;, meaning: &quot;音乐家&quot;, example: &quot;She is a talented musician.&quot; },
            { word: &quot;news&quot;, phonetic: &quot;/njuːz/&quot;, meaning: &quot;新闻&quot;, example: &quot;I watch the news every evening.&quot; },
            { word: &quot;newspaper&quot;, phonetic: &quot;/ˈnjuːzpeɪpə/&quot;, meaning: &quot;报纸&quot;, example: &quot;He reads the newspaper with breakfast.&quot; },
            { word: &quot;opera&quot;, phonetic: &quot;/ˈɒprə/&quot;, meaning: &quot;歌剧&quot;, example: &quot;We went to see an Italian opera.&quot; },
            { word: &quot;paint&quot;, phonetic: &quot;/peɪnt/&quot;, meaning: &quot;绘画&quot;, example: &quot;She likes to paint landscapes.&quot; },
            { word: &quot;painter&quot;, phonetic: &quot;/ˈpeɪntə/&quot;, meaning: &quot;画家&quot;, example: &quot;Van Gogh was a famous painter.&quot; },
            { word: &quot;photograph&quot;, phonetic: &quot;/ˈfəʊtəɡrɑːf/&quot;, meaning: &quot;照片&quot;, example: &quot;He took a beautiful photograph.&quot; },
            { word: &quot;photographer&quot;, phonetic: &quot;/fəˈtɒɡrəfə/&quot;, meaning: &quot;摄影师&quot;, example: &quot;She works as a fashion photographer.&quot; },
            { word: &quot;photography&quot;, phonetic: &quot;/fəˈtɒɡrəfi/&quot;, meaning: &quot;摄影&quot;, example: &quot;Photography is his hobby.&quot; },
            { word: &quot;piano&quot;, phonetic: &quot;/piˈænəʊ/&quot;, meaning: &quot;钢琴&quot;, example: &quot;She practices piano every day.&quot; },
            { word: &quot;picture&quot;, phonetic: &quot;/ˈpɪktʃə/&quot;, meaning: &quot;图画&quot;, example: &quot;The picture hangs in the gallery.&quot; },
            { word: &quot;play&quot;, phonetic: &quot;/pleɪ/&quot;, meaning: &quot;戏剧&quot;, example: &quot;We saw a Shakespeare play.&quot; },
            { word: &quot;pop music&quot;, phonetic: &quot;/pɒp ˈmjuːzɪk/&quot;, meaning: &quot;流行音乐&quot;, example: &quot;Pop music is played on most radio stations.&quot; },
            { word: &quot;practice&quot;, phonetic: &quot;/ˈpræktɪs/&quot;, meaning: &quot;练习&quot;, example: &quot;Practice makes perfect.&quot; },
            { word: &quot;programme&quot;, phonetic: &quot;/ˈprəʊɡræm/&quot;, meaning: &quot;节目&quot;, example: &quot;This TV programme is very popular.&quot; },
            { word: &quot;project&quot;, phonetic: &quot;/ˈprɒdʒekt/&quot;, meaning: &quot;项目&quot;, example: &quot;We&#x27;re working on a film project.&quot; },
            { word: &quot;radio&quot;, phonetic: &quot;/ˈreɪdiəʊ/&quot;, meaning: &quot;收音机&quot;, example: &quot;I listen to the radio while driving.&quot; },
            { word: &quot;rap music&quot;, phonetic: &quot;/ræp ˈmjuːzɪk/&quot;, meaning: &quot;说唱音乐&quot;, example: &quot;Rap music originated in urban communities.&quot; },
            { word: &quot;read&quot;, phonetic: &quot;/riːd/&quot;, meaning: &quot;阅读&quot;, example: &quot;I like to read novels.&quot; },
            { word: &quot;rock concert&quot;, phonetic: &quot;/rɒk ˈkɒnsət/&quot;, meaning: &quot;摇滚音乐会&quot;, example: &quot;The rock concert was amazing.&quot; },
            { word: &quot;screen&quot;, phonetic: &quot;/skriːn/&quot;, meaning: &quot;屏幕&quot;, example: &quot;The movie was shown on a big screen.&quot; },
            { word: &quot;show&quot;, phonetic: &quot;/ʃəʊ/&quot;, meaning: &quot;表演&quot;, example: &quot;The circus show delighted children.&quot; },
            { word: &quot;sing&quot;, phonetic: &quot;/sɪŋ/&quot;, meaning: &quot;唱歌&quot;, example: &quot;She loves to sing in the shower.&quot; },
            { word: &quot;singer&quot;, phonetic: &quot;/ˈsɪŋə/&quot;, meaning: &quot;歌手&quot;, example: &quot;Beyoncé is a famous singer.&quot; },
            { word: &quot;song&quot;, phonetic: &quot;/sɒŋ/&quot;, meaning: &quot;歌曲&quot;, example: &quot;This song is at the top of the charts.&quot; },
            { word: &quot;television&quot;, phonetic: &quot;/ˈtelɪvɪʒn/&quot;, meaning: &quot;电视&quot;, example: &quot;We watch television in the evening.&quot; },
            { word: &quot;theatre&quot;, phonetic: &quot;/ˈθɪətə/&quot;, meaning: &quot;剧院&quot;, example: &quot;The theatre was full for the premiere.&quot; },
            { word: &quot;ticket&quot;, phonetic: &quot;/ˈtɪkɪt/&quot;, meaning: &quot;票&quot;, example: &quot;I bought tickets for the concert.&quot; },
            { word: &quot;video game&quot;, phonetic: &quot;/ˈvɪdiəʊ ɡeɪm/&quot;, meaning: &quot;视频游戏&quot;, example: &quot;He plays video games with friends.&quot; },
            { word: &quot;watch&quot;, phonetic: &quot;/wɒtʃ/&quot;, meaning: &quot;观看&quot;, example: &quot;We like to watch movies together.&quot; }
        ];

        // 应用状态
        const state = {
            allWords: [...words],
            remainingWords: [...words],
            knownWords: [],
            reviewWords: [],
            currentWord: null,
            speechSynth: window.speechSynthesis,
            utterance: null
        };

        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;sound-btn&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const remainingCount = document.getElementById(&#x27;remaining-count&#x27;);
        const knownCount = document.getElementById(&#x27;known-count&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);

        // 初始化
        function init() {
            updateStats();
            nextWord();
            
            // 事件监听
            card.addEventListener(&#x27;click&#x27;, flipCard);
            soundBtn.addEventListener(&#x27;click&#x27;, playSound);
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;unsure&#x27;));
            dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;dont-know&#x27;));
            reviewAllBtn.addEventListener(&#x27;click&#x27;, reviewAll);
            continueBtn.addEventListener(&#x27;click&#x27;, hideReviewSection);
        }

        // 翻转卡片
        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        // 播放发音
        function playSound() {
            if (state.currentWord) {
                // 停止任何正在进行的发音
                if (state.speechSynth.speaking) {
                    state.speechSynth.cancel();
                }
                
                // 添加脉冲动画
                soundBtn.classList.add(&#x27;pulse&#x27;);
                
                // 创建新的发音实例
                state.utterance = new SpeechSynthesisUtterance(state.currentWord.word);
                state.utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                state.utterance.pitch = 1; // 音调
                state.utterance.rate = 0.9; // 语速
                
                // 发音结束后的回调
                state.utterance.onend = function() {
                    soundBtn.classList.remove(&#x27;pulse&#x27;);
                };
                
                // 播放发音
                state.speechSynth.speak(state.utterance);
            }
        }

        // 获取随机单词
        function getRandomWord() {
            if (state.remainingWords.length === 0) {
                if (state.reviewWords.length &gt; 0) {
                    showReviewSection();
                    return null;
                }
                return null; // 所有单词都学完了
            }
            
            const randomIndex = Math.floor(Math.random() * state.remainingWords.length);
            return state.remainingWords[randomIndex];
        }

        // 显示下一个单词
        function nextWord() {
            const word = getRandomWord();
            if (!word) {
                // 所有单词都学完了
                wordEl.textContent = &quot;恭喜！&quot;;
                phoneticEl.textContent = &quot;你已经学完了所有单词&quot;;
                meaningEl.textContent = &quot;&quot;;
                exampleEl.textContent = &quot;&quot;;
                return;
            }
            
            state.currentWord = word;
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = word.example;
            
            // 确保卡片是正面朝上
            card.classList.remove(&#x27;flipped&#x27;);
            
            updateStats();
        }

        // 处理用户响应
        function handleResponse(response) {
            if (!state.currentWord) return;
            
            const word = state.currentWord;
            
            // 从剩余单词中移除
            state.remainingWords = state.remainingWords.filter(w =&gt; w.word !== word.word);
            
            // 根据响应处理
            if (response === &#x27;known&#x27;) {
                state.knownWords.push(word);
            } else {
                // 避免重复添加
                if (!state.reviewWords.some(w =&gt; w.word === word.word)) {
                    state.reviewWords.push(word);
                }
            }
            
            nextWord();
        }

        // 显示复习部分
        function showReviewSection() {
            // 更新复习单词显示
            reviewWordsContainer.innerHTML = &#x27;&#x27;;
            state.reviewWords.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 点击复习单词时显示该单词
                    state.currentWord = word;
                    wordEl.textContent = word.word;
                    phoneticEl.textContent = word.phonetic;
                    meaningEl.textContent = word.meaning;
                    exampleEl.textContent = word.example;
                    card.classList.remove(&#x27;flipped&#x27;);
                    hideReviewSection();
                });
                reviewWordsContainer.appendChild(wordEl);
            });
            
            reviewSection.style.display = &#x27;block&#x27;;
        }

        // 隐藏复习部分
        function hideReviewSection() {
            reviewSection.style.display = &#x27;none&#x27;;
            // 将复习单词放回剩余单词列表
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            nextWord();
        }

        // 复习所有单词
        function reviewAll() {
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            hideReviewSection();
        }

        // 更新统计数据
        function updateStats() {
            remainingCount.textContent = state.remainingWords.length;
            knownCount.textContent = state.knownWords.length;
            reviewCount.textContent = state.reviewWords.length;
            
            // 更新进度条
            const totalWords = state.allWords.length;
            const learnedWords = state.knownWords.length;
            const progress = (learnedWords / totalWords) * 100;
            progressBar.style.width = `${progress}%`;
        }

        // 初始化应用
        document.addEventListener(&#x27;DOMContentLoaded&#x27;, init);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="8-家庭和朋友" class="section">
      <div class="section-header">
        <h2>8 家庭和朋友</h2>
        <div class="section-actions">
          <button onclick="openStandalone('8 家庭和朋友.html')">打开原文件</button>
          <button onclick="toggleHeight('8-家庭和朋友')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;单词闪卡学习系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #fff;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            width: 100%;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .progress-container {
            width: 100%;
            max-width: 500px;
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            padding: 15px;
            margin: 20px 0;
            backdrop-filter: blur(10px);
        }
        
        .progress-text {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-weight: 500;
        }
        
        .progress-bar {
            height: 12px;
            background: rgba(255,255,255,0.3);
            border-radius: 6px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
            border-radius: 6px;
            width: 0%;
            transition: width 0.5s ease;
        }
        
        .flashcard-container {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1500px;
            margin-bottom: 40px;
        }
        
        .flashcard {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.25);
        }
        
        .flashcard.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            border-radius: 20px;
            text-align: center;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ff7e5f, #feb47b);
            color: #fff;
        }
        
        .card-back {
            background: linear-gradient(45deg, #2193b0, #6dd5ed);
            color: #fff;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        .phonetic {
            font-size: 1.5rem;
            margin-bottom: 20px;
            opacity: 0.9;
            font-style: italic;
        }
        
        .meaning {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 25px;
        }
        
        .example {
            font-size: 1.3rem;
            font-style: italic;
            line-height: 1.6;
            max-width: 90%;
        }
        
        .speaker-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .speaker-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.05);
        }
        
        .speaker-btn i {
            font-size: 24px;
            color: white;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            width: 100%;
            max-width: 500px;
            margin-bottom: 30px;
        }
        
        .control-btn {
            flex: 1;
            padding: 15px 20px;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .control-btn i {
            margin-right: 8px;
        }
        
        #known-btn {
            background: linear-gradient(45deg, #00b09b, #96c93d);
        }
        
        #unknown-btn {
            background: linear-gradient(45deg, #ff416c, #ff4b2b);
        }
        
        #unsure-btn {
            background: linear-gradient(45deg, #5c6bc0, #3949ab);
        }
        
        .control-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }
        
        .review-section {
            width: 100%;
            max-width: 800px;
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 25px;
            margin-top: 20px;
            display: none;
            backdrop-filter: blur(10px);
        }
        
        .review-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            text-align: center;
            color: #ffcc00;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .review-word {
            background: rgba(255,255,255,0.15);
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .review-word:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-3px);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .review-btn {
            padding: 12px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            background: linear-gradient(45deg, #7b4397, #dc2430);
            color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .review-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }
        
        .completion-message {
            text-align: center;
            font-size: 2rem;
            margin-top: 30px;
            padding: 30px;
            background: rgba(0,0,0,0.2);
            border-radius: 20px;
            display: none;
        }
        
        .hint {
            margin-top: 20px;
            font-size: 1rem;
            opacity: 0.7;
            text-align: center;
        }
        
        @media (max-width: 600px) {
            .flashcard-container {
                height: 300px;
            }
            
            .word {
                font-size: 2.8rem;
            }
            
            .meaning {
                font-size: 1.8rem;
            }
            
            .controls {
                flex-direction: column;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;单词闪卡学习系统&lt;/h1&gt;
        &lt;p class=&quot;subtitle&quot;&gt;点击卡片翻转查看释义，使用下方按钮标记学习状态&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;progress-container&quot;&gt;
        &lt;div class=&quot;progress-text&quot;&gt;
            &lt;span&gt;学习进度&lt;/span&gt;
            &lt;span id=&quot;progress-text&quot;&gt;0/40&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress-bar&quot;&gt;
            &lt;div class=&quot;progress-fill&quot; id=&quot;progress-fill&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;flashcard-container&quot;&gt;
        &lt;div class=&quot;flashcard&quot; id=&quot;flashcard&quot;&gt;
            &lt;div class=&quot;card-face card-front&quot;&gt;
                &lt;h2 class=&quot;word&quot; id=&quot;word&quot;&gt;family&lt;/h2&gt;
                &lt;p class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈfæm.əl.i/&lt;/p&gt;
                &lt;button class=&quot;speaker-btn&quot; id=&quot;speaker-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-face card-back&quot;&gt;
                &lt;p class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;家庭；家族&lt;/p&gt;
                &lt;p class=&quot;example&quot; id=&quot;example&quot;&gt;She comes from a large family with five brothers and sisters.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;controls&quot;&gt;
        &lt;button class=&quot;control-btn&quot; id=&quot;known-btn&quot;&gt;&lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识&lt;/button&gt;
        &lt;button class=&quot;control-btn&quot; id=&quot;unsure-btn&quot;&gt;&lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 我不确定&lt;/button&gt;
        &lt;button class=&quot;control-btn&quot; id=&quot;unknown-btn&quot;&gt;&lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 我不认识&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
        &lt;h2 class=&quot;review-title&quot;&gt;需要复习的单词&lt;/h2&gt;
        &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;review-controls&quot;&gt;
            &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;复习全部单词&lt;/button&gt;
            &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;继续学习&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;completion-message&quot; id=&quot;completion-message&quot;&gt;
        &lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜！您已完成所有单词的学习！
    &lt;/div&gt;
    
    &lt;p class=&quot;hint&quot;&gt;提示：点击卡片可以翻转查看单词释义和例句&lt;/p&gt;

    &lt;script&gt;
        // 单词数据库
        const words = [
            { word: &quot;family&quot;, phonetic: &quot;/ˈfæm.əl.i/&quot;, meaning: &quot;家庭；家族&quot;, 
              example: &quot;She comes from a large family with five brothers and sisters.&quot; },
            { word: &quot;father&quot;, phonetic: &quot;/ˈfɑː.ðər/&quot;, meaning: &quot;父亲&quot;, 
              example: &quot;My father teaches mathematics at the university.&quot; },
            { word: &quot;mother&quot;, phonetic: &quot;/ˈmʌð.ər/&quot;, meaning: &quot;母亲&quot;, 
              example: &quot;Her mother is a famous painter.&quot; },
            { word: &quot;son&quot;, phonetic: &quot;/sʌn/&quot;, meaning: &quot;儿子&quot;, 
              example: &quot;Their son is studying medicine in London.&quot; },
            { word: &quot;daughter&quot;, phonetic: &quot;/ˈdɔː.tər/&quot;, meaning: &quot;女儿&quot;, 
              example: &quot;My daughter wants to become an astronaut.&quot; },
            { word: &quot;brother&quot;, phonetic: &quot;/ˈbrʌð.ər/&quot;, meaning: &quot;兄弟&quot;, 
              example: &quot;He has an older brother who lives in Canada.&quot; },
            { word: &quot;sister&quot;, phonetic: &quot;/ˈsɪs.tər/&quot;, meaning: &quot;姐妹&quot;, 
              example: &quot;My sister and I share the same room.&quot; },
            { word: &quot;grandfather&quot;, phonetic: &quot;/ˈɡræn.fɑː.ðər/&quot;, meaning: &quot;祖父；外祖父&quot;, 
              example: &quot;My grandfather fought in World War II.&quot; },
            { word: &quot;grandmother&quot;, phonetic: &quot;/ˈɡræn.mʌð.ər/&quot;, meaning: &quot;祖母；外祖母&quot;, 
              example: &quot;My grandmother makes the best apple pie.&quot; },
            { word: &quot;uncle&quot;, phonetic: &quot;/ˈʌŋ.kəl/&quot;, meaning: &quot;叔叔；舅舅&quot;, 
              example: &quot;My uncle owns a restaurant in the city center.&quot; },
            { word: &quot;aunt&quot;, phonetic: &quot;/ɑːnt/&quot;, meaning: &quot;姑妈；姨妈&quot;, 
              example: &quot;We visited my aunt in the countryside last summer.&quot; },
            { word: &quot;cousin&quot;, phonetic: &quot;/ˈkʌz.ən/&quot;, meaning: &quot;堂兄弟；表兄弟&quot;, 
              example: &quot;I have twelve cousins on my mother&#x27;s side.&quot; },
            { word: &quot;nephew&quot;, phonetic: &quot;/ˈnef.juː/&quot;, meaning: &quot;侄子；外甥&quot;, 
              example: &quot;My nephew just started primary school.&quot; },
            { word: &quot;niece&quot;, phonetic: &quot;/niːs/&quot;, meaning: &quot;侄女；外甥女&quot;, 
              example: &quot;I bought a doll for my niece&#x27;s birthday.&quot; },
            { word: &quot;parent&quot;, phonetic: &quot;/ˈpeə.rənt/&quot;, meaning: &quot;父亲；母亲&quot;, 
              example: &quot;Both parents attended the school meeting.&quot; },
            { word: &quot;child&quot;, phonetic: &quot;/tʃaɪld/&quot;, meaning: &quot;孩子&quot;, 
              example: &quot;Every child deserves access to education.&quot; },
            { word: &quot;grandson&quot;, phonetic: &quot;/ˈɡræn.sʌn/&quot;, meaning: &quot;孙子；外孙&quot;, 
              example: &quot;Their grandson visits them every weekend.&quot; },
            { word: &quot;granddaughter&quot;, phonetic: &quot;/ˈɡræn.dɔː.tər/&quot;, meaning: &quot;孙女；外孙女&quot;, 
              example: &quot;His granddaughter won a chess competition.&quot; },
            { word: &quot;husband&quot;, phonetic: &quot;/ˈhʌz.bənd/&quot;, meaning: &quot;丈夫&quot;, 
              example: &quot;Her husband is a software engineer.&quot; },
            { word: &quot;wife&quot;, phonetic: &quot;/waɪf/&quot;, meaning: &quot;妻子&quot;, 
              example: &quot;He introduced his wife at the company party.&quot; },
            { word: &quot;boy&quot;, phonetic: &quot;/bɔɪ/&quot;, meaning: &quot;男孩&quot;, 
              example: &quot;The boy is playing with his toy car.&quot; },
            { word: &quot;girl&quot;, phonetic: &quot;/ɡɜːl/&quot;, meaning: &quot;女孩&quot;, 
              example: &quot;The girl is reading a book under the tree.&quot; },
            { word: &quot;teenager&quot;, phonetic: &quot;/ˈtiːn.eɪ.dʒər/&quot;, meaning: &quot;青少年&quot;, 
              example: &quot;Many teenagers enjoy playing video games.&quot; },
            { word: &quot;grandparent&quot;, phonetic: &quot;/ˈɡræn.peə.rənt/&quot;, meaning: &quot;祖父母；外祖父母&quot;, 
              example: &quot;My grandparents live in a small village.&quot; },
            { word: &quot;grandchild&quot;, phonetic: &quot;/ˈɡræn.tʃaɪld/&quot;, meaning: &quot;孙子；孙女；外孙；外孙女&quot;, 
              example: &quot;Their first grandchild was born last month.&quot; },
            { word: &quot;Mr&quot;, phonetic: &quot;/ˈmɪs.tər/&quot;, meaning: &quot;先生&quot;, 
              example: &quot;Mr. Johnson is our new neighbor.&quot; },
            { word: &quot;Mrs&quot;, phonetic: &quot;/ˈmɪs.ɪz/&quot;, meaning: &quot;夫人；太太&quot;, 
              example: &quot;Mrs. Smith teaches English at our school.&quot; },
            { word: &quot;Miss&quot;, phonetic: &quot;/mɪs/&quot;, meaning: &quot;小姐&quot;, 
              example: &quot;Miss Davis will be your tour guide today.&quot; },
            { word: &quot;Ms&quot;, phonetic: &quot;/mɪz/&quot;, meaning: &quot;女士（婚姻状况不明）&quot;, 
              example: &quot;Ms. Anderson is the CEO of the company.&quot; },
            { word: &quot;dad(dy)&quot;, phonetic: &quot;/dæd/ /ˈdæd.i/&quot;, meaning: &quot;爸爸&quot;, 
              example: &quot;Daddy, can you help me with my homework?&quot; },
            { word: &quot;mom&quot;, phonetic: &quot;/mɒm/&quot;, meaning: &quot;妈妈&quot;, 
              example: &quot;Mom is making pancakes for breakfast.&quot; },
            { word: &quot;mum(my)&quot;, phonetic: &quot;/mʌm/ /ˈmʌm.i/&quot;, meaning: &quot;妈妈&quot;, 
              example: &quot;Mummy, I lost my teddy bear!&quot; },
            { word: &quot;grand(d)ad&quot;, phonetic: &quot;/ˈɡræn.dæd/&quot;, meaning: &quot;爷爷；外公&quot;, 
              example: &quot;Grandad tells the best bedtime stories.&quot; },
            { word: &quot;grandpa&quot;, phonetic: &quot;/ˈɡræn.pɑː/&quot;, meaning: &quot;爷爷；外公&quot;, 
              example: &quot;Grandpa takes us fishing every summer.&quot; },
            { word: &quot;granny&quot;, phonetic: &quot;/ˈɡræn.i/&quot;, meaning: &quot;奶奶；外婆&quot;, 
              example: &quot;Granny knits sweaters for all the grandchildren.&quot; },
            { word: &quot;grandma&quot;, phonetic: &quot;/ˈɡræn.mɑː/&quot;, meaning: &quot;奶奶；外婆&quot;, 
              example: &quot;Grandma makes delicious cookies.&quot; },
            { word: &quot;neighbour&quot;, phonetic: &quot;/ˈneɪ.bər/&quot;, meaning: &quot;邻居&quot;, 
              example: &quot;Our neighbour waters our plants when we&#x27;re away.&quot; },
            { word: &quot;friend&quot;, phonetic: &quot;/frend/&quot;, meaning: &quot;朋友&quot;, 
              example: &quot;A true friend is always there for you.&quot; },
            { word: &quot;friendly&quot;, phonetic: &quot;/ˈfrend.li/&quot;, meaning: &quot;友好的&quot;, 
              example: &quot;The locals are very friendly to tourists.&quot; },
            { word: &quot;group&quot;, phonetic: &quot;/ɡruːp/&quot;, meaning: &quot;组；群&quot;, 
              example: &quot;A group of students visited the museum.&quot; },
            { word: &quot;guest&quot;, phonetic: &quot;/ɡest/&quot;, meaning: &quot;客人&quot;, 
              example: &quot;We have guests coming for dinner tonight.&quot; },
            { word: &quot;guy&quot;, phonetic: &quot;/ɡaɪ/&quot;, meaning: &quot;家伙；人&quot;, 
              example: &quot;He&#x27;s a really nice guy once you get to know him.&quot; },
            { word: &quot;love&quot;, phonetic: &quot;/lʌv/&quot;, meaning: &quot;爱；喜爱&quot;, 
              example: &quot;They fell in love during their college years.&quot; },
            { word: &quot;married&quot;, phonetic: &quot;/ˈmær.id/&quot;, meaning: &quot;已婚的&quot;, 
              example: &quot;They&#x27;ve been married for twenty-five years.&quot; },
            { word: &quot;penfriend&quot;, phonetic: &quot;/ˈpen.frend/&quot;, meaning: &quot;笔友&quot;, 
              example: &quot;I have a penfriend from Japan.&quot; },
            { word: &quot;surname&quot;, phonetic: &quot;/ˈsɜː.neɪm/&quot;, meaning: &quot;姓氏&quot;, 
              example: &quot;What&#x27;s your surname?&quot; }
        ];
        
        // 应用状态
        let appState = {
            allWords: [...words],
            remainingWords: [],
            learnedWords: [],
            unsureWords: [],
            unknownWords: [],
            currentWord: null,
            isReviewMode: false
        };
        
        // DOM元素
        const flashcard = document.getElementById(&#x27;flashcard&#x27;);
        const wordElement = document.getElementById(&#x27;word&#x27;);
        const phoneticElement = document.getElementById(&#x27;phonetic&#x27;);
        const meaningElement = document.getElementById(&#x27;meaning&#x27;);
        const exampleElement = document.getElementById(&#x27;example&#x27;);
        const speakerBtn = document.getElementById(&#x27;speaker-btn&#x27;);
        const knownBtn = document.getElementById(&#x27;known-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const unknownBtn = document.getElementById(&#x27;unknown-btn&#x27;);
        const progressText = document.getElementById(&#x27;progress-text&#x27;);
        const progressFill = document.getElementById(&#x27;progress-fill&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWords = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const completionMessage = document.getElementById(&#x27;completion-message&#x27;);
        
        // 初始化应用
        function initApp() {
            // 重置状态
            appState.remainingWords = [...appState.allWords];
            appState.learnedWords = [];
            appState.unsureWords = [];
            appState.unknownWords = [];
            appState.isReviewMode = false;
            
            // 随机选择第一个单词
            selectRandomWord();
            
            // 更新进度
            updateProgress();
            
            // 隐藏复习区域和完成消息
            reviewSection.style.display = &#x27;none&#x27;;
            completionMessage.style.display = &#x27;none&#x27;;
        }
        
        // 选择随机单词
        function selectRandomWord() {
            if (appState.remainingWords.length === 0) {
                // 没有单词了，检查是否需要复习
                if (appState.unsureWords.length &gt; 0 || appState.unknownWords.length &gt; 0) {
                    enterReviewMode();
                    return;
                } else {
                    // 所有单词都学会了
                    showCompletion();
                    return;
                }
            }
            
            // 从剩余单词中随机选择一个
            const randomIndex = Math.floor(Math.random() * appState.remainingWords.length);
            appState.currentWord = appState.remainingWords[randomIndex];
            
            // 更新卡片内容
            updateCard();
        }
        
        // 更新卡片内容
        function updateCard() {
            const word = appState.currentWord;
            if (!word) return;
            
            wordElement.textContent = word.word;
            phoneticElement.textContent = word.phonetic;
            meaningElement.textContent = word.meaning;
            exampleElement.textContent = word.example;
            
            // 确保卡片正面朝上
            flashcard.classList.remove(&#x27;flipped&#x27;);
        }
        
        // 更新进度显示
        function updateProgress() {
            const total = appState.allWords.length;
            const learned = appState.learnedWords.length;
            
            progressText.textContent = `${learned}/${total}`;
            const progressPercent = (learned / total) * 100;
            progressFill.style.width = `${progressPercent}%`;
        }
        
        // 处理单词学习状态
        function handleWordStatus(status) {
            if (!appState.currentWord) return;
            
            // 从剩余单词中移除当前单词
            const wordIndex = appState.remainingWords.findIndex(
                w =&gt; w.word === appState.currentWord.word
            );
            
            if (wordIndex !== -1) {
                appState.remainingWords.splice(wordIndex, 1);
            }
            
            // 根据状态添加到相应列表
            if (status === &#x27;known&#x27;) {
                appState.learnedWords.push(appState.currentWord);
            } else if (status === &#x27;unsure&#x27;) {
                appState.unsureWords.push(appState.currentWord);
            } else if (status === &#x27;unknown&#x27;) {
                appState.unknownWords.push(appState.currentWord);
            }
            
            // 更新进度
            updateProgress();
            
            // 选择下一个单词
            selectRandomWord();
        }
        
        // 进入复习模式
        function enterReviewMode() {
            appState.isReviewMode = true;
            
            // 合并需要复习的单词
            appState.remainingWords = [
                ...appState.unsureWords,
                ...appState.unknownWords
            ];
            
            // 清空复习列表
            appState.unsureWords = [];
            appState.unknownWords = [];
            
            // 显示复习区域
            showReviewWords();
            reviewSection.style.display = &#x27;block&#x27;;
        }
        
        // 显示需要复习的单词
        function showReviewWords() {
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 添加不确定的单词
            appState.remainingWords.forEach(word =&gt; {
                const wordElement = document.createElement(&#x27;div&#x27;);
                wordElement.className = &#x27;review-word&#x27;;
                wordElement.textContent = word.word;
                wordElement.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 直接跳转到这个单词
                    appState.currentWord = word;
                    updateCard();
                    reviewSection.style.display = &#x27;none&#x27;;
                });
                reviewWords.appendChild(wordElement);
            });
        }
        
        // 显示完成消息
        function showCompletion() {
            completionMessage.style.display = &#x27;block&#x27;;
            flashcard.style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.hint&#x27;).style.display = &#x27;none&#x27;;
        }
        
        // 发音功能
        function speakWord() {
            if (!appState.currentWord) return;
            
            const utterance = new SpeechSynthesisUtterance(appState.currentWord.word);
            utterance.lang = &#x27;en-GB&#x27;;
            utterance.rate = 0.9;
            window.speechSynthesis.speak(utterance);
        }
        
        // 事件监听器
        flashcard.addEventListener(&#x27;click&#x27;, () =&gt; {
            flashcard.classList.toggle(&#x27;flipped&#x27;);
        });
        
        speakerBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        knownBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            handleWordStatus(&#x27;known&#x27;);
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            handleWordStatus(&#x27;unsure&#x27;);
        });
        
        unknownBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            handleWordStatus(&#x27;unknown&#x27;);
        });
        
        reviewAllBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 开始复习所有单词
            selectRandomWord();
            reviewSection.style.display = &#x27;none&#x27;;
        });
        
        continueBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 继续学习
            selectRandomWord();
            reviewSection.style.display = &#x27;none&#x27;;
        });
        
        // 初始化应用
        initApp();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="9-食物" class="section">
      <div class="section-header">
        <h2>9 食物</h2>
        <div class="section-actions">
          <button onclick="openStandalone('9 食物.html')">打开原文件</button>
          <button onclick="toggleHeight('9-食物')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;食物词汇闪卡学习系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            width: 100%;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            color: #e74c3c;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .subtitle {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            color: #555;
        }
        
        .progress-container {
            width: 100%;
            max-width: 500px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 15px;
            margin: 20px 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .progress-text {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-weight: 600;
            color: #e74c3c;
        }
        
        .progress-bar {
            height: 14px;
            background: rgba(231, 76, 60, 0.2);
            border-radius: 7px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #e74c3c, #e67e22);
            border-radius: 7px;
            width: 0%;
            transition: width 0.5s ease;
        }
        
        .flashcard-container {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1500px;
            margin-bottom: 40px;
        }
        
        .flashcard {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }
        
        .flashcard.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            overflow: hidden;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ff7e5f, #feb47b);
            color: #fff;
            border: 8px solid #fff;
        }
        
        .card-back {
            background: linear-gradient(45deg, #e67e22, #d35400);
            color: #fff;
            transform: rotateY(180deg);
            border: 8px solid #fff;
        }
        
        .word {
            font-size: 3.2rem;
            font-weight: 800;
            margin-bottom: 15px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        .phonetic {
            font-size: 1.5rem;
            margin-bottom: 20px;
            opacity: 0.9;
            font-style: italic;
            background: rgba(255, 255, 255, 0.2);
            padding: 5px 15px;
            border-radius: 20px;
        }
        
        .meaning {
            font-size: 2.4rem;
            font-weight: 700;
            margin-bottom: 25px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .example {
            font-size: 1.3rem;
            font-style: italic;
            line-height: 1.6;
            max-width: 90%;
            background: rgba(0, 0, 0, 0.1);
            padding: 15px;
            border-radius: 10px;
        }
        
        .speaker-btn {
            background: rgba(255, 255, 255, 0.3);
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            position: absolute;
            top: 20px;
            right: 20px;
        }
        
        .speaker-btn:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
        }
        
        .speaker-btn i {
            font-size: 24px;
            color: white;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            width: 100%;
            max-width: 500px;
            margin-bottom: 30px;
        }
        
        .control-btn {
            flex: 1;
            padding: 16px 20px;
            border: none;
            border-radius: 15px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        #known-btn {
            background: linear-gradient(45deg, #27ae60, #2ecc71);
        }
        
        #unknown-btn {
            background: linear-gradient(45deg, #e74c3c, #c0392b);
        }
        
        #unsure-btn {
            background: linear-gradient(45deg, #3498db, #2980b9);
        }
        
        .control-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        
        .review-section {
            width: 100%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 25px;
            margin-top: 20px;
            display: none;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .review-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            text-align: center;
            color: #e74c3c;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .review-word {
            background: rgba(231, 76, 60, 0.1);
            padding: 12px 24px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid #e74c3c;
            color: #c0392b;
            font-weight: 600;
        }
        
        .review-word:hover {
            background: rgba(231, 76, 60, 0.2);
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(231, 76, 60, 0.2);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .review-btn {
            padding: 14px 35px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
        }
        
        .review-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        
        #review-all-btn {
            background: linear-gradient(45deg, #e67e22, #d35400);
        }
        
        #continue-btn {
            background: linear-gradient(45deg, #27ae60, #2ecc71);
        }
        
        .completion-message {
            text-align: center;
            font-size: 2.2rem;
            margin-top: 30px;
            padding: 40px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            display: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            color: #e74c3c;
            max-width: 600px;
        }
        
        .hint {
            margin-top: 20px;
            font-size: 1rem;
            color: #fff;
            text-align: center;
            background: rgba(0, 0, 0, 0.2);
            padding: 10px 20px;
            border-radius: 20px;
        }
        
        .food-icons {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .food-icon {
            position: absolute;
            font-size: 2rem;
            opacity: 0.1;
            color: #fff;
        }
        
        @media (max-width: 600px) {
            .flashcard-container {
                height: 320px;
            }
            
            .word {
                font-size: 2.6rem;
            }
            
            .meaning {
                font-size: 2rem;
            }
            
            .controls {
                flex-direction: column;
                gap: 12px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;&lt;i class=&quot;fas fa-utensils&quot;&gt;&lt;/i&gt; 食物词汇闪卡学习系统&lt;/h1&gt;
        &lt;p class=&quot;subtitle&quot;&gt;点击卡片翻转查看释义和例句，使用下方按钮标记学习状态&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;progress-container&quot;&gt;
        &lt;div class=&quot;progress-text&quot;&gt;
            &lt;span&gt;学习进度&lt;/span&gt;
            &lt;span id=&quot;progress-text&quot;&gt;0/100&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress-bar&quot;&gt;
            &lt;div class=&quot;progress-fill&quot; id=&quot;progress-fill&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;flashcard-container&quot;&gt;
        &lt;div class=&quot;flashcard&quot; id=&quot;flashcard&quot;&gt;
            &lt;div class=&quot;card-face card-front&quot;&gt;
                &lt;div class=&quot;food-icons&quot; id=&quot;food-icons&quot;&gt;&lt;/div&gt;
                &lt;h2 class=&quot;word&quot; id=&quot;word&quot;&gt;apple&lt;/h2&gt;
                &lt;p class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈæp.əl/&lt;/p&gt;
                &lt;button class=&quot;speaker-btn&quot; id=&quot;speaker-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-face card-back&quot;&gt;
                &lt;div class=&quot;food-icons&quot; id=&quot;back-icons&quot;&gt;&lt;/div&gt;
                &lt;p class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;苹果&lt;/p&gt;
                &lt;p class=&quot;example&quot; id=&quot;example&quot;&gt;An apple a day keeps the doctor away.&lt;/p&gt;
                &lt;button class=&quot;speaker-btn&quot; id=&quot;back-speaker-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;controls&quot;&gt;
        &lt;button class=&quot;control-btn&quot; id=&quot;known-btn&quot;&gt;&lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识&lt;/button&gt;
        &lt;button class=&quot;control-btn&quot; id=&quot;unsure-btn&quot;&gt;&lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 我不确定&lt;/button&gt;
        &lt;button class=&quot;control-btn&quot; id=&quot;unknown-btn&quot;&gt;&lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 我不认识&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
        &lt;h2 class=&quot;review-title&quot;&gt;&lt;i class=&quot;fas fa-redo-alt&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
        &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;review-controls&quot;&gt;
            &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;&lt;i class=&quot;fas fa-book&quot;&gt;&lt;/i&gt; 复习全部单词&lt;/button&gt;
            &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;&lt;i class=&quot;fas fa-play&quot;&gt;&lt;/i&gt; 继续学习&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;completion-message&quot; id=&quot;completion-message&quot;&gt;
        &lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜！您已完成所有食物词汇的学习！
    &lt;/div&gt;
    
    &lt;p class=&quot;hint&quot;&gt;提示：点击卡片可以翻转查看单词释义和例句&lt;/p&gt;

    &lt;script&gt;
        // 食物词汇数据库
        const words = [
            { word: &quot;apple&quot;, phonetic: &quot;/ˈæp.əl/&quot;, meaning: &quot;苹果&quot;, 
              example: &quot;An apple a day keeps the doctor away.&quot; },
            { word: &quot;bake&quot;, phonetic: &quot;/beɪk/&quot;, meaning: &quot;烘烤&quot;, 
              example: &quot;She likes to bake cookies on weekends.&quot; },
            { word: &quot;banana&quot;, phonetic: &quot;/bəˈnɑː.nə/&quot;, meaning: &quot;香蕉&quot;, 
              example: &quot;Bananas are rich in potassium.&quot; },
            { word: &quot;barbecue&quot;, phonetic: &quot;/ˈbɑː.bɪ.kjuː/&quot;, meaning: &quot;烧烤&quot;, 
              example: &quot;We had a barbecue in the backyard last Sunday.&quot; },
            { word: &quot;bean&quot;, phonetic: &quot;/biːn/&quot;, meaning: &quot;豆子&quot;, 
              example: &quot;Green beans are my favorite vegetable.&quot; },
            { word: &quot;biscuit&quot;, phonetic: &quot;/ˈbɪs.kɪt/&quot;, meaning: &quot;饼干&quot;, 
              example: &quot;She served tea and biscuits to the guests.&quot; },
            { word: &quot;boil&quot;, phonetic: &quot;/bɔɪl/&quot;, meaning: &quot;煮沸&quot;, 
              example: &quot;Boil the potatoes for 20 minutes.&quot; },
            { word: &quot;boiled&quot;, phonetic: &quot;/bɔɪld/&quot;, meaning: &quot;煮熟的&quot;, 
              example: &quot;I prefer boiled eggs for breakfast.&quot; },
            { word: &quot;bottle&quot;, phonetic: &quot;/ˈbɒt.əl/&quot;, meaning: &quot;瓶子&quot;, 
              example: &quot;He drank a whole bottle of water.&quot; },
            { word: &quot;bowl&quot;, phonetic: &quot;/bəʊl/&quot;, meaning: &quot;碗&quot;, 
              example: &quot;She served the soup in a large bowl.&quot; },
            { word: &quot;box&quot;, phonetic: &quot;/bɒks/&quot;, meaning: &quot;盒子&quot;, 
              example: &quot;The chocolates came in a beautiful box.&quot; },
            { word: &quot;bread&quot;, phonetic: &quot;/bred/&quot;, meaning: &quot;面包&quot;, 
              example: &quot;Fresh bread is baked daily in this bakery.&quot; },
            { word: &quot;break (n 休息)&quot;, phonetic: &quot;/breɪk/&quot;, meaning: &quot;休息&quot;, 
              example: &quot;Let&#x27;s take a short coffee break.&quot; },
            { word: &quot;breakfast&quot;, phonetic: &quot;/ˈbrek.fəst/&quot;, meaning: &quot;早餐&quot;, 
              example: &quot;Breakfast is the most important meal of the day.&quot; },
            { word: &quot;burger&quot;, phonetic: &quot;/ˈbɜː.ɡər/&quot;, meaning: &quot;汉堡包&quot;, 
              example: &quot;He ordered a cheeseburger with fries.&quot; },
            { word: &quot;butter&quot;, phonetic: &quot;/ˈbʌt.ər/&quot;, meaning: &quot;黄油&quot;, 
              example: &quot;Spread some butter on the toast.&quot; },
            { word: &quot;café&quot;, phonetic: &quot;/ˈkæf.eɪ/&quot;, meaning: &quot;咖啡馆&quot;, 
              example: &quot;We met at a small café downtown.&quot; },
            { word: &quot;cafeteria&quot;, phonetic: &quot;/ˌkæf.əˈtɪə.ri.ə/&quot;, meaning: &quot;自助餐厅&quot;, 
              example: &quot;The school cafeteria serves lunch at noon.&quot; },
            { word: &quot;cake&quot;, phonetic: &quot;/keɪk/&quot;, meaning: &quot;蛋糕&quot;, 
              example: &quot;She baked a chocolate cake for his birthday.&quot; },
            { word: &quot;can (n.金属罐)&quot;, phonetic: &quot;/kæn/&quot;, meaning: &quot;罐&quot;, 
              example: &quot;A can of cola contains a lot of sugar.&quot; },
            { word: &quot;candy&quot;, phonetic: &quot;/ˈkæn.di/&quot;, meaning: &quot;糖果&quot;, 
              example: &quot;Children love to eat candy.&quot; },
            { word: &quot;carrot&quot;, phonetic: &quot;/ˈkær.ət/&quot;, meaning: &quot;胡萝卜&quot;, 
              example: &quot;Rabbits enjoy eating carrots.&quot; },
            { word: &quot;cereal&quot;, phonetic: &quot;/ˈsɪə.ri.əl/&quot;, meaning: &quot;谷物&quot;, 
              example: &quot;I eat cereal with milk for breakfast.&quot; },
            { word: &quot;cheese&quot;, phonetic: &quot;/tʃiːz/&quot;, meaning: &quot;奶酪&quot;, 
              example: &quot;This pizza has extra cheese.&quot; },
            { word: &quot;chef&quot;, phonetic: &quot;/ʃef/&quot;, meaning: &quot;厨师&quot;, 
              example: &quot;The chef prepared a special dish for us.&quot; },
            { word: &quot;chicken&quot;, phonetic: &quot;/ˈtʃɪk.ɪn/&quot;, meaning: &quot;鸡肉&quot;, 
              example: &quot;Fried chicken is very popular.&quot; },
            { word: &quot;chilli&quot;, phonetic: &quot;/ˈtʃɪl.i/&quot;, meaning: &quot;辣椒&quot;, 
              example: &quot;This soup is too spicy with extra chilli.&quot; },
            { word: &quot;chips&quot;, phonetic: &quot;/tʃɪps/&quot;, meaning: &quot;薯片&quot;, 
              example: &quot;He bought a bag of potato chips.&quot; },
            { word: &quot;chocolate&quot;, phonetic: &quot;/ˈtʃɒk.lət/&quot;, meaning: &quot;巧克力&quot;, 
              example: &quot;Dark chocolate is healthier than milk chocolate.&quot; },
            { word: &quot;coffee&quot;, phonetic: &quot;/ˈkɒf.i/&quot;, meaning: &quot;咖啡&quot;, 
              example: &quot;I drink two cups of coffee every morning.&quot; },
            { word: &quot;cola&quot;, phonetic: &quot;/ˈkəʊ.lə/&quot;, meaning: &quot;可乐&quot;, 
              example: &quot;Would you like a glass of cola?&quot; },
            { word: &quot;cook (n&amp;v)&quot;, phonetic: &quot;/kʊk/&quot;, meaning: &quot;厨师；烹饪&quot;, 
              example: &quot;My father is an excellent cook.&quot; },
            { word: &quot;cooker&quot;, phonetic: &quot;/ˈkʊk.ər/&quot;, meaning: &quot;厨具&quot;, 
              example: &quot;We bought a new electric cooker.&quot; },
            { word: &quot;cookie&quot;, phonetic: &quot;/ˈkʊk.i/&quot;, meaning: &quot;曲奇饼&quot;, 
              example: &quot;She baked chocolate chip cookies.&quot; },
            { word: &quot;cooking&quot;, phonetic: &quot;/ˈkʊk.ɪŋ/&quot;, meaning: &quot;烹饪&quot;, 
              example: &quot;Cooking is one of her hobbies.&quot; },
            { word: &quot;cream&quot;, phonetic: &quot;/kriːm/&quot;, meaning: &quot;奶油&quot;, 
              example: &quot;Add some cream to the sauce.&quot; },
            { word: &quot;cup&quot;, phonetic: &quot;/kʌp/&quot;, meaning: &quot;杯子&quot;, 
              example: &quot;Would you like a cup of tea?&quot; },
            { word: &quot;curry&quot;, phonetic: &quot;/ˈkʌr.i/&quot;, meaning: &quot;咖喱&quot;, 
              example: &quot;Indian curry is my favorite dish.&quot; },
            { word: &quot;cut (n)&quot;, phonetic: &quot;/kʌt/&quot;, meaning: &quot;切&quot;, 
              example: &quot;Be careful with that knife cut.&quot; },
            { word: &quot;delicious&quot;, phonetic: &quot;/dɪˈlɪʃ.əs/&quot;, meaning: &quot;美味的&quot;, 
              example: &quot;This cake is absolutely delicious.&quot; },
            { word: &quot;dessert&quot;, phonetic: &quot;/dɪˈzɜːt/&quot;, meaning: &quot;甜点&quot;, 
              example: &quot;We had ice cream for dessert.&quot; },
            { word: &quot;dinner&quot;, phonetic: &quot;/ˈdɪn.ər/&quot;, meaning: &quot;晚餐&quot;, 
              example: &quot;What are we having for dinner tonight?&quot; },
            { word: &quot;dish (n)&quot;, phonetic: &quot;/dɪʃ/&quot;, meaning: &quot;菜肴&quot;, 
              example: &quot;Pasta is my favorite Italian dish.&quot; },
            { word: &quot;drink&quot;, phonetic: &quot;/drɪŋk/&quot;, meaning: &quot;饮料&quot;, 
              example: &quot;Would you like a drink?&quot; },
            { word: &quot;eat&quot;, phonetic: &quot;/iːt/&quot;, meaning: &quot;吃&quot;, 
              example: &quot;It&#x27;s important to eat healthy food.&quot; },
            { word: &quot;egg&quot;, phonetic: &quot;/eɡ/&quot;, meaning: &quot;鸡蛋&quot;, 
              example: &quot;She likes her eggs boiled for breakfast.&quot; },
            { word: &quot;fast food&quot;, phonetic: &quot;/ˌfɑːst ˈfuːd/&quot;, meaning: &quot;快餐&quot;, 
              example: &quot;Fast food is convenient but not very healthy.&quot; },
            { word: &quot;fish&quot;, phonetic: &quot;/fɪʃ/&quot;, meaning: &quot;鱼&quot;, 
              example: &quot;We had grilled fish for dinner.&quot; },
            { word: &quot;food&quot;, phonetic: &quot;/fuːd/&quot;, meaning: &quot;食物&quot;, 
              example: &quot;Italian food is famous worldwide.&quot; },
            { word: &quot;fork&quot;, phonetic: &quot;/fɔːk/&quot;, meaning: &quot;叉子&quot;, 
              example: &quot;Use a fork to eat the salad.&quot; },
            { word: &quot;French fries&quot;, phonetic: &quot;/ˌfrentʃ ˈfraɪz/&quot;, meaning: &quot;薯条&quot;, 
              example: &quot;Would you like ketchup with your French fries?&quot; },
            { word: &quot;fresh (adj.新鲜的)&quot;, phonetic: &quot;/freʃ/&quot;, meaning: &quot;新鲜的&quot;, 
              example: &quot;We buy fresh vegetables from the market.&quot; },
            { word: &quot;fridge&quot;, phonetic: &quot;/frɪdʒ/&quot;, meaning: &quot;冰箱&quot;, 
              example: &quot;Put the milk back in the fridge.&quot; },
            { word: &quot;fried （油炸的）&quot;, phonetic: &quot;/fraɪd/&quot;, meaning: &quot;油炸的&quot;, 
              example: &quot;Fried chicken is delicious but unhealthy.&quot; },
            { word: &quot;fruit&quot;, phonetic: &quot;/fruːt/&quot;, meaning: &quot;水果&quot;, 
              example: &quot;Apples and oranges are common fruits.&quot; },
            { word: &quot;garlic&quot;, phonetic: &quot;/ˈɡɑː.lɪk/&quot;, meaning: &quot;大蒜&quot;, 
              example: &quot;Garlic adds flavor to many dishes.&quot; },
            { word: &quot;glass&quot;, phonetic: &quot;/ɡlɑːs/&quot;, meaning: &quot;玻璃杯&quot;, 
              example: &quot;She poured juice into a glass.&quot; },
            { word: &quot;grape&quot;, phonetic: &quot;/ɡreɪp/&quot;, meaning: &quot;葡萄&quot;, 
              example: &quot;These grapes are sweet and juicy.&quot; },
            { word: &quot;grilled&quot;, phonetic: &quot;/ɡrɪld/&quot;, meaning: &quot;烤的&quot;, 
              example: &quot;Grilled vegetables are healthy and tasty.&quot; },
            { word: &quot;honey&quot;, phonetic: &quot;/ˈhʌn.i/&quot;, meaning: &quot;蜂蜜&quot;, 
              example: &quot;Add a spoon of honey to your tea.&quot; },
            { word: &quot;hungry&quot;, phonetic: &quot;/ˈhʌŋ.ɡri/&quot;, meaning: &quot;饥饿的&quot;, 
              example: &quot;I&#x27;m hungry after the long walk.&quot; },
            { word: &quot;ice&quot;, phonetic: &quot;/aɪs/&quot;, meaning: &quot;冰&quot;, 
              example: &quot;Would you like ice in your drink?&quot; },
            { word: &quot;ice cream&quot;, phonetic: &quot;/ˌaɪs ˈkriːm/&quot;, meaning: &quot;冰淇淋&quot;, 
              example: &quot;Children love ice cream in summer.&quot; },
            { word: &quot;jam&quot;, phonetic: &quot;/dʒæm/&quot;, meaning: &quot;果酱&quot;, 
              example: &quot;Strawberry jam is delicious on toast.&quot; },
            { word: &quot;juice&quot;, phonetic: &quot;/dʒuːs/&quot;, meaning: &quot;果汁&quot;, 
              example: &quot;Orange juice is rich in vitamin C.&quot; },
            { word: &quot;kitchen&quot;, phonetic: &quot;/ˈkɪtʃ.ən/&quot;, meaning: &quot;厨房&quot;, 
              example: &quot;She is cooking in the kitchen.&quot; },
            { word: &quot;knife&quot;, phonetic: &quot;/naɪf/&quot;, meaning: &quot;刀&quot;, 
              example: &quot;Use a sharp knife to cut the vegetables.&quot; },
            { word: &quot;lemon&quot;, phonetic: &quot;/ˈlem.ən/&quot;, meaning: &quot;柠檬&quot;, 
              example: &quot;Add some lemon juice to the sauce.&quot; },
            { word: &quot;lemonade&quot;, phonetic: &quot;/ˌlem.əˈneɪd/&quot;, meaning: &quot;柠檬水&quot;, 
              example: &quot;Homemade lemonade is refreshing in summer.&quot; },
            { word: &quot;lunch&quot;, phonetic: &quot;/lʌntʃ/&quot;, meaning: &quot;午餐&quot;, 
              example: &quot;We usually have lunch at 12:30.&quot; },
            { word: &quot;lunchtime&quot;, phonetic: &quot;/ˈlʌntʃ.taɪm/&quot;, meaning: &quot;午餐时间&quot;, 
              example: &quot;My lunchtime is from 12 to 1 pm.&quot; },
            { word: &quot;main course&quot;, phonetic: &quot;/ˌmeɪn ˈkɔːs/&quot;, meaning: &quot;主菜&quot;, 
              example: &quot;The main course was roast chicken with potatoes.&quot; },
            { word: &quot;mango&quot;, phonetic: &quot;/ˈmæŋ.ɡəʊ/&quot;, meaning: &quot;芒果&quot;, 
              example: &quot;Mango is known as the king of fruits.&quot; },
            { word: &quot;meal&quot;, phonetic: &quot;/miːl/&quot;, meaning: &quot;一餐&quot;, 
              example: &quot;Dinner is our main meal of the day.&quot; },
            { word: &quot;meat&quot;, phonetic: &quot;/miːt/&quot;, meaning: &quot;肉&quot;, 
              example: &quot;We don&#x27;t eat meat on Fridays.&quot; },
            { word: &quot;melon&quot;, phonetic: &quot;/ˈmel.ən/&quot;, meaning: &quot;甜瓜&quot;, 
              example: &quot;Watermelon is a popular summer melon.&quot; },
            { word: &quot;menu&quot;, phonetic: &quot;/ˈmen.juː/&quot;, meaning: &quot;菜单&quot;, 
              example: &quot;Could I see the menu, please?&quot; },
            { word: &quot;milk&quot;, phonetic: &quot;/mɪlk/&quot;, meaning: &quot;牛奶&quot;, 
              example: &quot;Children should drink milk every day.&quot; },
            { word: &quot;mineral water&quot;, phonetic: &quot;/ˌmɪn.ər.əl ˈwɔː.tər/&quot;, meaning: &quot;矿泉水&quot;, 
              example: &quot;I&#x27;d like a bottle of mineral water.&quot; },
            { word: &quot;mushrooms&quot;, phonetic: &quot;/ˈmʌʃ.ruːmz/&quot;, meaning: &quot;蘑菇&quot;, 
              example: &quot;Mushrooms add flavor to sauces.&quot; },
            { word: &quot;oil&quot;, phonetic: &quot;/ɔɪl/&quot;, meaning: &quot;油&quot;, 
              example: &quot;Olive oil is good for cooking.&quot; },
            { word: &quot;omelette&quot;, phonetic: &quot;/ˈɒm.lət/&quot;, meaning: &quot;煎蛋卷&quot;, 
              example: &quot;She made a cheese omelette for breakfast.&quot; },
            { word: &quot;onion&quot;, phonetic: &quot;/ˈʌn.jən/&quot;, meaning: &quot;洋葱&quot;, 
              example: &quot;Chop the onion finely for the sauce.&quot; },
            { word: &quot;orange&quot;, phonetic: &quot;/ˈɒr.ɪndʒ/&quot;, meaning: &quot;橙子&quot;, 
              example: &quot;Would you like an orange for dessert?&quot; },
            { word: &quot;order a meal&quot;, phonetic: &quot;/ˈɔː.dər ə miːl/&quot;, meaning: &quot;点餐&quot;, 
              example: &quot;We ordered a meal from the restaurant.&quot; },
            { word: &quot;pasta&quot;, phonetic: &quot;/ˈpæs.tə/&quot;, meaning: &quot;意大利面&quot;, 
              example: &quot;Spaghetti is a popular type of pasta.&quot; },
            { word: &quot;pear&quot;, phonetic: &quot;/peər/&quot;, meaning: &quot;梨&quot;, 
              example: &quot;This pear is sweet and juicy.&quot; },
            { word: &quot;pepper&quot;, phonetic: &quot;/ˈpep.ər/&quot;, meaning: &quot;胡椒&quot;, 
              example: &quot;Add some black pepper to the soup.&quot; },
            { word: &quot;picnic&quot;, phonetic: &quot;/ˈpɪk.nɪk/&quot;, meaning: &quot;野餐&quot;, 
              example: &quot;We went for a picnic in the park.&quot; },
            { word: &quot;piece of cake&quot;, phonetic: &quot;/piːs əv keɪk/&quot;, meaning: &quot;小菜一碟&quot;, 
              example: &quot;The exam was a piece of cake for him.&quot; },
            { word: &quot;pizza&quot;, phonetic: &quot;/ˈpiːt.sə/&quot;, meaning: &quot;披萨&quot;, 
              example: &quot;Let&#x27;s order pizza for dinner tonight.&quot; },
            { word: &quot;plate&quot;, phonetic: &quot;/pleɪt/&quot;, meaning: &quot;盘子&quot;, 
              example: &quot;Put the food on a large plate.&quot; },
            { word: &quot;potato&quot;, phonetic: &quot;/pəˈteɪ.təʊ/&quot;, meaning: &quot;土豆&quot;, 
              example: &quot;Mashed potatoes are a popular side dish.&quot; },
            { word: &quot;restaurant&quot;, phonetic: &quot;/ˈres.trɒnt/&quot;, meaning: &quot;餐厅&quot;, 
              example: &quot;We celebrated at a fancy restaurant.&quot; },
            { word: &quot;rice&quot;, phonetic: &quot;/raɪs/&quot;, meaning: &quot;米饭&quot;, 
              example: &quot;Rice is a staple food in many countries.&quot; },
            { word: &quot;roast (v &amp; adj)&quot;, phonetic: &quot;/rəʊst/&quot;, meaning: &quot;烤&quot;, 
              example: &quot;We had roast beef for Sunday lunch.&quot; },
            { word: &quot;salad&quot;, phonetic: &quot;/ˈsæl.əd/&quot;, meaning: &quot;沙拉&quot;, 
              example: &quot;A green salad goes well with this dish.&quot; },
            { word: &quot;salt&quot;, phonetic: &quot;/sɒlt/&quot;, meaning: &quot;盐&quot;, 
              example: &quot;Add a pinch of salt to the sauce.&quot; },
            { word: &quot;sandwich&quot;, phonetic: &quot;/ˈsæn.wɪdʒ/&quot;, meaning: &quot;三明治&quot;, 
              example: &quot;I made a ham sandwich for lunch.&quot; },
            { word: &quot;sauce&quot;, phonetic: &quot;/sɔːs/&quot;, meaning: &quot;酱汁&quot;, 
              example: &quot;Tomato sauce is used in many dishes.&quot; },
            { word: &quot;sausage&quot;, phonetic: &quot;/ˈsɒs.ɪdʒ/&quot;, meaning: &quot;香肠&quot;, 
              example: &quot;We had sausages and mashed potatoes.&quot; },
            { word: &quot;serve (招待，供应)&quot;, phonetic: &quot;/sɜːv/&quot;, meaning: &quot;服务&quot;, 
              example: &quot;The restaurant serves excellent seafood.&quot; },
            { word: &quot;slice (n)&quot;, phonetic: &quot;/slaɪs/&quot;, meaning: &quot;薄片&quot;, 
              example: &quot;Would you like a slice of cake?&quot; },
            { word: &quot;snack (n)&quot;, phonetic: &quot;/snæk/&quot;, meaning: &quot;小吃&quot;, 
              example: &quot;I had a small snack before dinner.&quot; },
            { word: &quot;soup&quot;, phonetic: &quot;/suːp/&quot;, meaning: &quot;汤&quot;, 
              example: &quot;Tomato soup is my favorite.&quot; },
            { word: &quot;steak&quot;, phonetic: &quot;/steɪk/&quot;, meaning: &quot;牛排&quot;, 
              example: &quot;He ordered a medium-rare steak.&quot; },
            { word: &quot;strawberry&quot;, phonetic: &quot;/ˈstrɔː.bər.i/&quot;, meaning: &quot;草莓&quot;, 
              example: &quot;Strawberries are delicious with cream.&quot; },
            { word: &quot;sugar&quot;, phonetic: &quot;/ˈʃʊɡ.ər/&quot;, meaning: &quot;糖&quot;, 
              example: &quot;Add two spoons of sugar to your tea.&quot; },
            { word: &quot;supper&quot;, phonetic: &quot;/ˈsʌp.ər/&quot;, meaning: &quot;晚餐&quot;, 
              example: &quot;We usually have a light supper.&quot; },
            { word: &quot;sweet (n &amp; adj)&quot;, phonetic: &quot;/swiːt/&quot;, meaning: &quot;甜的；甜食&quot;, 
              example: &quot;This cake is too sweet for my taste.&quot; },
            { word: &quot;tea&quot;, phonetic: &quot;/tiː/&quot;, meaning: &quot;茶&quot;, 
              example: &quot;Would you like a cup of tea?&quot; },
            { word: &quot;thirsty&quot;, phonetic: &quot;/ˈθɜː.sti/&quot;, meaning: &quot;口渴的&quot;, 
              example: &quot;I feel thirsty after the exercise.&quot; },
            { word: &quot;toast&quot;, phonetic: &quot;/təʊst/&quot;, meaning: &quot;吐司&quot;, 
              example: &quot;I have toast with jam for breakfast.&quot; },
            { word: &quot;tomato&quot;, phonetic: &quot;/təˈmɑː.təʊ/&quot;, meaning: &quot;西红柿&quot;, 
              example: &quot;Fresh tomatoes are used in salads.&quot; },
            { word: &quot;vegetable&quot;, phonetic: &quot;/ˈvedʒ.tə.bəl/&quot;, meaning: &quot;蔬菜&quot;, 
              example: &quot;Eat plenty of fresh vegetables.&quot; },
            { word: &quot;waiter&quot;, phonetic: &quot;/ˈweɪ.tər/&quot;, meaning: &quot;服务员&quot;, 
              example: &quot;The waiter took our order.&quot; },
            { word: &quot;waitress&quot;, phonetic: &quot;/ˈweɪ.trəs/&quot;, meaning: &quot;女服务员&quot;, 
              example: &quot;The waitress brought our drinks.&quot; },
            { word: &quot;wash up&quot;, phonetic: &quot;/ˌwɒʃ ˈʌp/&quot;, meaning: &quot;洗碗&quot;, 
              example: &quot;I&#x27;ll wash up after dinner.&quot; },
            { word: &quot;water&quot;, phonetic: &quot;/ˈwɔː.tər/&quot;, meaning: &quot;水&quot;, 
              example: &quot;Drink at least eight glasses of water daily.&quot; },
            { word: &quot;yoghurt&quot;, phonetic: &quot;/ˈjɒɡ.ət/&quot;, meaning: &quot;酸奶&quot;, 
              example: &quot;Yoghurt is good for digestion.&quot; }
        ];
        
        // 应用状态
        let appState = {
            allWords: [...words],
            remainingWords: [],
            learnedWords: [],
            unsureWords: [],
            unknownWords: [],
            currentWord: null,
            isReviewMode: false
        };
        
        // DOM元素
        const flashcard = document.getElementById(&#x27;flashcard&#x27;);
        const wordElement = document.getElementById(&#x27;word&#x27;);
        const phoneticElement = document.getElementById(&#x27;phonetic&#x27;);
        const meaningElement = document.getElementById(&#x27;meaning&#x27;);
        const exampleElement = document.getElementById(&#x27;example&#x27;);
        const speakerBtn = document.getElementById(&#x27;speaker-btn&#x27;);
        const backSpeakerBtn = document.getElementById(&#x27;back-speaker-btn&#x27;);
        const knownBtn = document.getElementById(&#x27;known-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const unknownBtn = document.getElementById(&#x27;unknown-btn&#x27;);
        const progressText = document.getElementById(&#x27;progress-text&#x27;);
        const progressFill = document.getElementById(&#x27;progress-fill&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWords = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const completionMessage = document.getElementById(&#x27;completion-message&#x27;);
        const foodIcons = document.getElementById(&#x27;food-icons&#x27;);
        const backIcons = document.getElementById(&#x27;back-icons&#x27;);
        
        // 初始化应用
        function initApp() {
            // 重置状态
            appState.remainingWords = [...appState.allWords];
            appState.learnedWords = [];
            appState.unsureWords = [];
            appState.unknownWords = [];
            appState.isReviewMode = false;
            
            // 创建食物图标
            createFoodIcons(foodIcons);
            createFoodIcons(backIcons);
            
            // 随机选择第一个单词
            selectRandomWord();
            
            // 更新进度
            updateProgress();
            
            // 隐藏复习区域和完成消息
            reviewSection.style.display = &#x27;none&#x27;;
            completionMessage.style.display = &#x27;none&#x27;;
        }
        
        // 创建食物图标
        function createFoodIcons(container) {
            container.innerHTML = &#x27;&#x27;;
            const icons = [&#x27;🍎&#x27;, &#x27;🍐&#x27;, &#x27;🍊&#x27;, &#x27;🍋&#x27;, &#x27;🍌&#x27;, &#x27;🍉&#x27;, &#x27;🍇&#x27;, &#x27;🍓&#x27;, &#x27;🍈&#x27;, &#x27;🍒&#x27;, 
                         &#x27;🍑&#x27;, &#x27;🍍&#x27;, &#x27;🥥&#x27;, &#x27;🥝&#x27;, &#x27;🍅&#x27;, &#x27;🥑&#x27;, &#x27;🥦&#x27;, &#x27;🥬&#x27;, &#x27;🥒&#x27;, &#x27;🌶️&#x27;,
                         &#x27;🌽&#x27;, &#x27;🥕&#x27;, &#x27;🥔&#x27;, &#x27;🍠&#x27;, &#x27;🥐&#x27;, &#x27;🍞&#x27;, &#x27;🥖&#x27;, &#x27;🥨&#x27;, &#x27;🧀&#x27;, &#x27;🥚&#x27;,
                         &#x27;🍳&#x27;, &#x27;🥞&#x27;, &#x27;🥓&#x27;, &#x27;🥩&#x27;, &#x27;🍗&#x27;, &#x27;🍖&#x27;, &#x27;🌭&#x27;, &#x27;🍔&#x27;, &#x27;🍟&#x27;, &#x27;🍕&#x27;,
                         &#x27;🥪&#x27;, &#x27;🥙&#x27;, &#x27;🌮&#x27;, &#x27;🌯&#x27;, &#x27;🥗&#x27;, &#x27;🥘&#x27;, &#x27;🍝&#x27;, &#x27;🍜&#x27;, &#x27;🍲&#x27;, &#x27;🍛&#x27;,
                         &#x27;🍣&#x27;, &#x27;🍱&#x27;, &#x27;🍤&#x27;, &#x27;🍙&#x27;, &#x27;🍚&#x27;, &#x27;🍘&#x27;, &#x27;🍥&#x27;, &#x27;🥠&#x27;, &#x27;🍢&#x27;, &#x27;🍡&#x27;,
                         &#x27;🍧&#x27;, &#x27;🍨&#x27;, &#x27;🍦&#x27;, &#x27;🥧&#x27;, &#x27;🍰&#x27;, &#x27;🎂&#x27;, &#x27;🍮&#x27;, &#x27;🍭&#x27;, &#x27;🍬&#x27;, &#x27;🍫&#x27;,
                         &#x27;🍿&#x27;, &#x27;🥜&#x27;, &#x27;🌰&#x27;, &#x27;🍯&#x27;, &#x27;🥛&#x27;, &#x27;🍼&#x27;, &#x27;☕&#x27;, &#x27;🍵&#x27;, &#x27;🥤&#x27;, &#x27;🍶&#x27;];
            
            for (let i = 0; i &lt; 20; i++) {
                const icon = document.createElement(&#x27;div&#x27;);
                icon.className = &#x27;food-icon&#x27;;
                icon.textContent = icons[Math.floor(Math.random() * icons.length)];
                icon.style.left = `${Math.random() * 100}%`;
                icon.style.top = `${Math.random() * 100}%`;
                icon.style.fontSize = `${Math.random() * 20 + 20}px`;
                icon.style.transform = `rotate(${Math.random() * 360}deg)`;
                container.appendChild(icon);
            }
        }
        
        // 选择随机单词
        function selectRandomWord() {
            if (appState.remainingWords.length === 0) {
                // 没有单词了，检查是否需要复习
                if (appState.unsureWords.length &gt; 0 || appState.unknownWords.length &gt; 0) {
                    enterReviewMode();
                    return;
                } else {
                    // 所有单词都学会了
                    showCompletion();
                    return;
                }
            }
            
            // 从剩余单词中随机选择一个
            const randomIndex = Math.floor(Math.random() * appState.remainingWords.length);
            appState.currentWord = appState.remainingWords[randomIndex];
            
            // 更新卡片内容
            updateCard();
        }
        
        // 更新卡片内容
        function updateCard() {
            const word = appState.currentWord;
            if (!word) return;
            
            wordElement.textContent = word.word;
            phoneticElement.textContent = word.phonetic;
            meaningElement.textContent = word.meaning;
            exampleElement.textContent = word.example;
            
            // 确保卡片正面朝上
            flashcard.classList.remove(&#x27;flipped&#x27;);
        }
        
        // 更新进度显示
        function updateProgress() {
            const total = appState.allWords.length;
            const learned = appState.learnedWords.length;
            
            progressText.textContent = `${learned}/${total}`;
            const progressPercent = (learned / total) * 100;
            progressFill.style.width = `${progressPercent}%`;
        }
        
        // 处理单词学习状态
        function handleWordStatus(status) {
            if (!appState.currentWord) return;
            
            // 从剩余单词中移除当前单词
            const wordIndex = appState.remainingWords.findIndex(
                w =&gt; w.word === appState.currentWord.word
            );
            
            if (wordIndex !== -1) {
                appState.remainingWords.splice(wordIndex, 1);
            }
            
            // 根据状态添加到相应列表
            if (status === &#x27;known&#x27;) {
                appState.learnedWords.push(appState.currentWord);
            } else if (status === &#x27;unsure&#x27;) {
                appState.unsureWords.push(appState.currentWord);
            } else if (status === &#x27;unknown&#x27;) {
                appState.unknownWords.push(appState.currentWord);
            }
            
            // 更新进度
            updateProgress();
            
            // 选择下一个单词
            selectRandomWord();
        }
        
        // 进入复习模式
        function enterReviewMode() {
            appState.isReviewMode = true;
            
            // 合并需要复习的单词
            appState.remainingWords = [
                ...appState.unsureWords,
                ...appState.unknownWords
            ];
            
            // 清空复习列表
            appState.unsureWords = [];
            appState.unknownWords = [];
            
            // 显示复习区域
            showReviewWords();
            reviewSection.style.display = &#x27;block&#x27;;
        }
        
        // 显示需要复习的单词
        function showReviewWords() {
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 添加不确定的单词
            appState.remainingWords.forEach(word =&gt; {
                const wordElement = document.createElement(&#x27;div&#x27;);
                wordElement.className = &#x27;review-word&#x27;;
                wordElement.textContent = word.word;
                wordElement.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 直接跳转到这个单词
                    appState.currentWord = word;
                    updateCard();
                    reviewSection.style.display = &#x27;none&#x27;;
                });
                reviewWords.appendChild(wordElement);
            });
        }
        
        // 显示完成消息
        function showCompletion() {
            completionMessage.style.display = &#x27;block&#x27;;
            flashcard.style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.hint&#x27;).style.display = &#x27;none&#x27;;
        }
        
        // 发音功能
        function speakWord() {
            if (!appState.currentWord) return;
            
            const utterance = new SpeechSynthesisUtterance(appState.currentWord.word);
            utterance.lang = &#x27;en-GB&#x27;;
            utterance.rate = 0.9;
            window.speechSynthesis.speak(utterance);
        }
        
        // 事件监听器
        flashcard.addEventListener(&#x27;click&#x27;, () =&gt; {
            flashcard.classList.toggle(&#x27;flipped&#x27;);
        });
        
        speakerBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        backSpeakerBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        knownBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            handleWordStatus(&#x27;known&#x27;);
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            handleWordStatus(&#x27;unsure&#x27;);
        });
        
        unknownBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            handleWordStatus(&#x27;unknown&#x27;);
        });
        
        reviewAllBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 开始复习所有单词
            selectRandomWord();
            reviewSection.style.display = &#x27;none&#x27;;
        });
        
        continueBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 继续学习
            selectRandomWord();
            reviewSection.style.display = &#x27;none&#x27;;
        });
        
        // 初始化应用
        initApp();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="10-节日" class="section">
      <div class="section-header">
        <h2>10 节日</h2>
        <div class="section-actions">
          <button onclick="openStandalone('10 节日.html')">打开原文件</button>
          <button onclick="toggleHeight('10-节日')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;爱好与休闲单词学习卡片&lt;/title&gt;
    &lt;style&gt;
        :root {
            --primary-color: #4361ee;
            --success-color: #4cc9f0;
            --warning-color: #f8961e;
            --danger-color: #f94144;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }
        
        body {
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            color: var(--dark-color);
        }
        
        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
        
        .card-container {
            perspective: 1000px;
            width: 100%;
            max-width: 500px;
            margin-bottom: 30px;
        }
        
        .card {
            position: relative;
            width: 100%;
            height: 300px;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-radius: 15px;
            background: white;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            padding: 30px;
            box-sizing: border-box;
            background: white;
        }
        
        .card-front {
            border: 2px solid var(--primary-color);
        }
        
        .card-back {
            border: 2px solid var(--success-color);
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            color: var(--primary-color);
        }
        
        .phonetic {
            font-size: 1.3rem;
            margin-bottom: 20px;
            font-style: italic;
            color: #6c757d;
        }
        
        .meaning {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: center;
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .example {
            font-size: 1.1rem;
            text-align: center;
            line-height: 1.6;
            padding: 15px;
            background-color: rgba(76, 201, 240, 0.1);
            border-radius: 10px;
            width: 90%;
            color: #495057;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
            width: 100%;
            max-width: 500px;
            flex-wrap: wrap;
        }
        
        button {
            border: none;
            color: white;
            padding: 12px 25px;
            text-align: center;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 50px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            min-width: 140px;
            letter-spacing: 0.5px;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        #known {
            background: linear-gradient(135deg, var(--success-color) 0%, #38a3a5 100%);
        }
        
        #unknown {
            background: linear-gradient(135deg, var(--danger-color) 0%, #d62839 100%);
        }
        
        #unsure {
            background: linear-gradient(135deg, var(--warning-color) 0%, #f3722c 100%);
        }
        
        .progress-container {
            width: 100%;
            max-width: 500px;
            background: #e9ecef;
            border-radius: 10px;
            height: 10px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color) 0%, #4895ef 100%);
            border-radius: 10px;
            transition: width 0.4s ease;
        }
        
        .progress-text {
            text-align: center;
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 5px;
        }
        
        .completion-message {
            display: none;
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 500px;
            margin: 20px auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid var(--success-color);
        }
        
        .completion-message h2 {
            color: var(--success-color);
            margin-bottom: 20px;
        }
        
        .review-section {
            display: none;
            width: 100%;
            max-width: 500px;
            margin-top: 30px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid var(--warning-color);
        }
        
        .review-title {
            color: var(--warning-color);
            text-align: center;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .review-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .review-item {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.2s;
        }
        
        .review-item:hover {
            background: #f8f9fa;
        }
        
        .review-word {
            font-weight: bold;
            color: var(--dark-color);
        }
        
        .review-meaning {
            color: #6c757d;
        }
        
        .action-button {
            display: block;
            margin: 25px auto 0;
            background: var(--primary-color);
            width: 200px;
        }
        
        .flip-hint {
            text-align: center;
            color: #6c757d;
            font-size: 0.9rem;
            margin-top: 15px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        @media (max-width: 576px) {
            .card {
                height: 280px;
            }
            
            .word {
                font-size: 2rem;
            }
            
            .meaning {
                font-size: 1.3rem;
            }
            
            button {
                min-width: 120px;
                padding: 10px 20px;
            }
            
            .controls {
                gap: 10px;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;爱好与休闲单词学习卡片&lt;/h1&gt;
    
    &lt;div class=&quot;progress-text&quot; id=&quot;progress-text&quot;&gt;进度: 1/17&lt;/div&gt;
    &lt;div class=&quot;progress-container&quot;&gt;
        &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot; style=&quot;width: 5.88%&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;card-container&quot;&gt;
        &lt;div class=&quot;card&quot; id=&quot;card&quot; onclick=&quot;flipCard()&quot;&gt;
            &lt;div class=&quot;card-face card-front&quot;&gt;
                &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;Word&lt;/div&gt;
                &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;Phonetic&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-face card-back&quot;&gt;
                &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;Meaning&lt;/div&gt;
                &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;Example sentence will appear here&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
    
    &lt;div class=&quot;controls&quot;&gt;
        &lt;button id=&quot;known&quot;&gt;我认识&lt;/button&gt;
        &lt;button id=&quot;unsure&quot;&gt;我不确定&lt;/button&gt;
        &lt;button id=&quot;unknown&quot;&gt;我不认识&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;completion-message&quot; id=&quot;completion-message&quot;&gt;
        &lt;h2&gt;🎉 恭喜！您已完成所有单词的学习！&lt;/h2&gt;
        &lt;p&gt;以下是您需要复习的单词：&lt;/p&gt;
        &lt;div id=&quot;review-words&quot;&gt;&lt;/div&gt;
        &lt;button onclick=&quot;startReview()&quot; class=&quot;action-button&quot;&gt;开始复习&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
        &lt;h3 class=&quot;review-title&quot;&gt;📚 复习单词列表&lt;/h3&gt;
        &lt;ul class=&quot;review-list&quot; id=&quot;review-list&quot;&gt;&lt;/ul&gt;
        &lt;button onclick=&quot;finishReview()&quot; class=&quot;action-button&quot;&gt;完成复习&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        const words = [
            {
                word: &quot;guitar&quot;,
                phonetic: &quot;[gɪˈtɑː(r)]&quot;,
                meaning: &quot;吉他&quot;,
                example: &quot;She plays the guitar every evening after school. (她每天放学后都弹吉他。)&quot;
            },
            {
                word: &quot;hobby&quot;,
                phonetic: &quot;[ˈhɒbi]&quot;,
                meaning: &quot;嗜好；业余爱好&quot;,
                example: &quot;My hobby is collecting stamps from different countries. (我的爱好是收集不同国家的邮票。)&quot;
            },
            {
                word: &quot;holidays&quot;,
                phonetic: &quot;[ˈhɒlədeɪz]&quot;,
                meaning: &quot;假期&quot;,
                example: &quot;We always go to the beach during summer holidays. (我们总是在暑假期间去海滩。)&quot;
            },
            {
                word: &quot;join&quot;,
                phonetic: &quot;[dʒɔɪn]&quot;,
                meaning: &quot;参加；加入；连接&quot;,
                example: &quot;I want to join the school basketball team. (我想加入学校篮球队。)&quot;
            },
            {
                word: &quot;magazine&quot;,
                phonetic: &quot;[ˌmæɡəˈziːn]&quot;,
                meaning: &quot;杂志；期刊&quot;,
                example: &quot;There&#x27;s an interesting article in this month&#x27;s science magazine. (这本科学杂志本月有一篇有趣的文章。)&quot;
            },
            {
                word: &quot;member&quot;,
                phonetic: &quot;[ˈmembə(r)]&quot;,
                meaning: &quot;成员&quot;,
                example: &quot;She has been a member of the chess club for two years. (她成为国际象棋俱乐部的成员已有两年。)&quot;
            },
            {
                word: &quot;MP3 player&quot;,
                phonetic: &quot;[em piː θriː ˈpleɪə(r)]&quot;,
                meaning: &quot;MP3播放机&quot;,
                example: &quot;I listen to music on my MP3 player when I go jogging. (我慢跑时用MP3播放器听音乐。)&quot;
            },
            {
                word: &quot;museum&quot;,
                phonetic: &quot;[mjuˈziːəm]&quot;,
                meaning: &quot;博物馆&quot;,
                example: &quot;The science museum has many interactive exhibits for children. (科学博物馆有许多供儿童互动的展品。)&quot;
            },
            {
                word: &quot;music&quot;,
                phonetic: &quot;[ˈmjuːzɪk]&quot;,
                meaning: &quot;音乐；乐曲&quot;,
                example: &quot;Classical music helps me concentrate when I&#x27;m studying. (古典音乐帮助我在学习时集中注意力。)&quot;
            },
            {
                word: &quot;musician&quot;,
                phonetic: &quot;[mjuˈzɪʃn]&quot;,
                meaning: &quot;音乐家；作曲家；乐师&quot;,
                example: &quot;The young musician performed beautifully at the concert. (这位年轻音乐家在音乐会上表演得很精彩。)&quot;
            },
            {
                word: &quot;paint&quot;,
                phonetic: &quot;[peɪnt]&quot;,
                meaning: &quot;油漆；刷油漆；用颜料画&quot;,
                example: &quot;We need to paint the walls before moving into the new house. (我们需要在搬进新房子前粉刷墙壁。)&quot;
            },
            {
                word: &quot;park&quot;,
                phonetic: &quot;[pɑːk]&quot;,
                meaning: &quot;公园&quot;,
                example: &quot;Children are playing football in the park. (孩子们正在公园里踢足球。)&quot;
            },
            {
                word: &quot;party&quot;,
                phonetic: &quot;[ˈpɑːti]&quot;,
                meaning: &quot;聚会；宴会；联欢会；派对&quot;,
                example: &quot;We&#x27;re having a birthday party for my sister on Saturday. (我们周六要为我妹妹举办生日派对。)&quot;
            },
            {
                word: &quot;photograph&quot;,
                phonetic: &quot;[ˈfəʊtəɡrɑːf]&quot;,
                meaning: &quot;照片；拍照&quot;,
                example: &quot;I took a photograph of the sunset at the beach. (我在海滩拍了一张日落的照片。)&quot;
            },
            {
                word: &quot;picnic&quot;,
                phonetic: &quot;[ˈpɪknɪk]&quot;,
                meaning: &quot;野餐&quot;,
                example: &quot;Let&#x27;s have a picnic by the lake this weekend. (这个周末我们去湖边野餐吧。)&quot;
            },
            {
                word: &quot;quiz&quot;,
                phonetic: &quot;[kwɪz]&quot;,
                meaning: &quot;知识竞赛；智力游戏&quot;,
                example: &quot;Our class won first prize in the school quiz competition. (我们班在学校知识竞赛中获得了一等奖。)&quot;
            },
            {
                word: &quot;tent&quot;,
                phonetic: &quot;[tent]&quot;,
                meaning: &quot;帐篷；帐棚&quot;,
                example: &quot;We slept in a tent during our camping trip. (我们在露营旅行时睡在帐篷里。)&quot;
            },
            {
                word: &quot;video game&quot;,
                phonetic: &quot;[ˈvɪdiəʊ ɡeɪm]&quot;,
                meaning: &quot;电子游戏&quot;,
                example: &quot;My brother spends too much time playing video games. (我弟弟花太多时间玩电子游戏了。)&quot;
            }
        ];

        let currentIndex = 0;
        let remainingWords = [...words];
        let knownWords = [];
        let unknownWords = [];
        let unsureWords = [];
        let isReviewMode = false;
        let reviewWords = [];
        
        const card = document.getElementById(&#x27;card&#x27;);
        const wordElement = document.getElementById(&#x27;word&#x27;);
        const phoneticElement = document.getElementById(&#x27;phonetic&#x27;);
        const meaningElement = document.getElementById(&#x27;meaning&#x27;);
        const exampleElement = document.getElementById(&#x27;example&#x27;);
        const progressText = document.getElementById(&#x27;progress-text&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);
        const completionMessage = document.getElementById(&#x27;completion-message&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewList = document.getElementById(&#x27;review-list&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);

        // Initialize
        shuffleArray(remainingWords);
        updateCard();

        // Event listeners
        document.getElementById(&#x27;known&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;known&#x27;));
        document.getElementById(&#x27;unknown&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unknown&#x27;));
        document.getElementById(&#x27;unsure&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unsure&#x27;));
        
        document.addEventListener(&#x27;keydown&#x27;, function(event) {
            if (event.key === &#x27;1&#x27;) {
                markWord(&#x27;known&#x27;);
            } else if (event.key === &#x27;2&#x27;) {
                markWord(&#x27;unknown&#x27;);
            } else if (event.key === &#x27;3&#x27;) {
                markWord(&#x27;unsure&#x27;);
            } else if (event.key === &#x27; &#x27; || event.key === &#x27;Enter&#x27;) {
                flipCard();
            }
        });

        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        function updateCard() {
            if (remainingWords.length === 0) {
                if (!isReviewMode &amp;&amp; (unknownWords.length &gt; 0 || unsureWords.length &gt; 0)) {
                    showCompletionMessage();
                } else if (isReviewMode &amp;&amp; reviewWords.length === 0) {
                    finishReview();
                } else {
                    // All words are known, no need to review
                    showCompletionMessage();
                }
                return;
            }
            
            const currentWord = remainingWords[0];
            wordElement.textContent = currentWord.word;
            phoneticElement.textContent = currentWord.phonetic;
            meaningElement.textContent = currentWord.meaning;
            exampleElement.textContent = currentWord.example;
            
            const totalWords = words.length;
            const learnedWords = totalWords - remainingWords.length + 1;
            const progressPercentage = (learnedWords / totalWords) * 100;
            
            progressText.textContent = `进度: ${learnedWords}/${totalWords}`;
            progressBar.style.width = `${progressPercentage}%`;
            
            // Reset card to front view when changing words
            if (card.classList.contains(&#x27;flipped&#x27;)) {
                card.classList.remove(&#x27;flipped&#x27;);
            }
        }

        function markWord(status) {
            if (remainingWords.length === 0) return;
            
            const currentWord = remainingWords.shift();
            
            switch (status) {
                case &#x27;known&#x27;:
                    knownWords.push(currentWord);
                    break;
                case &#x27;unknown&#x27;:
                    unknownWords.push(currentWord);
                    break;
                case &#x27;unsure&#x27;:
                    unsureWords.push(currentWord);
                    break;
            }
            
            updateCard();
        }

        function showCompletionMessage() {
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.flip-hint&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-text&#x27;).style.display = &#x27;none&#x27;;
            
            let reviewWordsList = &#x27;&#x27;;
            
            if (unknownWords.length &gt; 0) {
                reviewWordsList += &#x27;&lt;div style=&quot;margin-bottom: 20px;&quot;&gt;&#x27;;
                reviewWordsList += &#x27;&lt;h3 style=&quot;color: var(--danger-color); margin-bottom: 10px;&quot;&gt;我不认识的单词&lt;/h3&gt;&#x27;;
                reviewWordsList += &#x27;&lt;ul style=&quot;text-align: left; padding-left: 20px;&quot;&gt;&#x27;;
                unknownWords.forEach(word =&gt; {
                    reviewWordsList += `&lt;li&gt;&lt;strong&gt;${word.word}&lt;/strong&gt; - ${word.meaning}&lt;/li&gt;`;
                });
                reviewWordsList += &#x27;&lt;/ul&gt;&lt;/div&gt;&#x27;;
            }
            
            if (unsureWords.length &gt; 0) {
                reviewWordsList += &#x27;&lt;div&gt;&#x27;;
                reviewWordsList += &#x27;&lt;h3 style=&quot;color: var(--warning-color); margin-bottom: 10px;&quot;&gt;我不确定的单词&lt;/h3&gt;&#x27;;
                reviewWordsList += &#x27;&lt;ul style=&quot;text-align: left; padding-left: 20px;&quot;&gt;&#x27;;
                unsureWords.forEach(word =&gt; {
                    reviewWordsList += `&lt;li&gt;&lt;strong&gt;${word.word}&lt;/strong&gt; - ${word.meaning}&lt;/li&gt;`;
                });
                reviewWordsList += &#x27;&lt;/ul&gt;&lt;/div&gt;&#x27;;
            }
            
            if (unknownWords.length === 0 &amp;&amp; unsureWords.length === 0) {
                completionMessage.innerHTML = `
                    &lt;h2&gt;🎉 恭喜！您已掌握所有单词！&lt;/h2&gt;
                    &lt;p&gt;您已经完成了所有17个单词的学习，并且全部标记为&quot;我认识&quot;！&lt;/p&gt;
                    &lt;button onclick=&quot;location.reload()&quot; class=&quot;action-button&quot;&gt;重新开始&lt;/button&gt;
                `;
            } else {
                reviewWordsContainer.innerHTML = reviewWordsList;
            }
            
            completionMessage.style.display = &#x27;block&#x27;;
        }

        function startReview() {
            completionMessage.style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;block&#x27;;
            
            // Combine unknown and unsure words for review
            reviewWords = [...unknownWords, ...unsureWords];
            shuffleArray(reviewWords);
            unknownWords = [];
            unsureWords = [];
            isReviewMode = true;
            
            // Update remaining words for review
            remainingWords = [...reviewWords];
            reviewWords = [];
            
            // Show review list
            updateReviewList();
            
            // Show card and controls again
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.flip-hint&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-text&#x27;).style.display = &#x27;block&#x27;;
            
            // Start reviewing
            updateCard();
        }

        function updateReviewList() {
            reviewList.innerHTML = &#x27;&#x27;;
            const allReviewWords = [...unknownWords, ...unsureWords, ...remainingWords];
            
            allReviewWords.forEach(word =&gt; {
                const li = document.createElement(&#x27;li&#x27;);
                li.className = &#x27;review-item&#x27;;
                li.innerHTML = `
                    &lt;span class=&quot;review-word&quot;&gt;${word.word}&lt;/span&gt;
                    &lt;span class=&quot;review-meaning&quot;&gt;${word.meaning}&lt;/span&gt;
                `;
                reviewList.appendChild(li);
            });
        }

        function finishReview() {
            isReviewMode = false;
            reviewSection.style.display = &#x27;none&#x27;;
            
            if (unknownWords.length === 0 &amp;&amp; unsureWords.length === 0) {
                // All words are known now
                completionMessage.innerHTML = `
                    &lt;h2&gt;🎉 恭喜！您已掌握所有单词！&lt;/h2&gt;
                    &lt;p&gt;您已经完成了所有17个单词的学习，包括复习部分。&lt;/p&gt;
                    &lt;button onclick=&quot;location.reload()&quot; class=&quot;action-button&quot;&gt;重新开始&lt;/button&gt;
                `;
            } else {
                // Still some words to review
                showCompletionMessage();
            }
        }

        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="11-兴趣爱好与休闲活动" class="section">
      <div class="section-header">
        <h2>11 兴趣爱好与休闲活动</h2>
        <div class="section-actions">
          <button onclick="openStandalone('11 兴趣爱好与休闲活动.html')">打开原文件</button>
          <button onclick="toggleHeight('11-兴趣爱好与休闲活动')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;爱好与休闲单词学习卡片&lt;/title&gt;
    &lt;style&gt;
        :root {
            --primary-color: #4361ee;
            --success-color: #4cc9f0;
            --warning-color: #f8961e;
            --danger-color: #f94144;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }
        
        body {
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            color: var(--dark-color);
        }
        
        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
        
        .card-container {
            perspective: 1000px;
            width: 100%;
            max-width: 500px;
            margin-bottom: 30px;
        }
        
        .card {
            position: relative;
            width: 100%;
            height: 300px;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-radius: 15px;
            background: white;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            padding: 30px;
            box-sizing: border-box;
            background: white;
        }
        
        .card-front {
            border: 2px solid var(--primary-color);
        }
        
        .card-back {
            border: 2px solid var(--success-color);
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            color: var(--primary-color);
        }
        
        .phonetic {
            font-size: 1.3rem;
            margin-bottom: 20px;
            font-style: italic;
            color: #6c757d;
        }
        
        .meaning {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: center;
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .example {
            font-size: 1.1rem;
            text-align: center;
            line-height: 1.6;
            padding: 15px;
            background-color: rgba(76, 201, 240, 0.1);
            border-radius: 10px;
            width: 90%;
            color: #495057;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
            width: 100%;
            max-width: 500px;
            flex-wrap: wrap;
        }
        
        button {
            border: none;
            color: white;
            padding: 12px 25px;
            text-align: center;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 50px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            min-width: 140px;
            letter-spacing: 0.5px;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        #known {
            background: linear-gradient(135deg, var(--success-color) 0%, #38a3a5 100%);
        }
        
        #unknown {
            background: linear-gradient(135deg, var(--danger-color) 0%, #d62839 100%);
        }
        
        #unsure {
            background: linear-gradient(135deg, var(--warning-color) 0%, #f3722c 100%);
        }
        
        .progress-container {
            width: 100%;
            max-width: 500px;
            background: #e9ecef;
            border-radius: 10px;
            height: 10px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color) 0%, #4895ef 100%);
            border-radius: 10px;
            transition: width 0.4s ease;
        }
        
        .progress-text {
            text-align: center;
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 5px;
        }
        
        .completion-message {
            display: none;
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 500px;
            margin: 20px auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid var(--success-color);
        }
        
        .completion-message h2 {
            color: var(--success-color);
            margin-bottom: 20px;
        }
        
        .review-section {
            display: none;
            width: 100%;
            max-width: 500px;
            margin-top: 30px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid var(--warning-color);
        }
        
        .review-title {
            color: var(--warning-color);
            text-align: center;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .review-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .review-item {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.2s;
        }
        
        .review-item:hover {
            background: #f8f9fa;
        }
        
        .review-word {
            font-weight: bold;
            color: var(--dark-color);
        }
        
        .review-meaning {
            color: #6c757d;
        }
        
        .action-button {
            display: block;
            margin: 25px auto 0;
            background: var(--primary-color);
            width: 200px;
        }
        
        .flip-hint {
            text-align: center;
            color: #6c757d;
            font-size: 0.9rem;
            margin-top: 15px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        @media (max-width: 576px) {
            .card {
                height: 280px;
            }
            
            .word {
                font-size: 2rem;
            }
            
            .meaning {
                font-size: 1.3rem;
            }
            
            button {
                min-width: 120px;
                padding: 10px 20px;
            }
            
            .controls {
                gap: 10px;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;爱好与休闲单词学习卡片&lt;/h1&gt;
    
    &lt;div class=&quot;progress-text&quot; id=&quot;progress-text&quot;&gt;进度: 1/32&lt;/div&gt;
    &lt;div class=&quot;progress-container&quot;&gt;
        &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot; style=&quot;width: 3.13%&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;card-container&quot;&gt;
        &lt;div class=&quot;card&quot; id=&quot;card&quot; onclick=&quot;flipCard()&quot;&gt;
            &lt;div class=&quot;card-face card-front&quot;&gt;
                &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;Word&lt;/div&gt;
                &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;Phonetic&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-face card-back&quot;&gt;
                &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;Meaning&lt;/div&gt;
                &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;Example sentence will appear here&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
    
    &lt;div class=&quot;controls&quot;&gt;
        &lt;button id=&quot;known&quot;&gt;我认识&lt;/button&gt;
        &lt;button id=&quot;unsure&quot;&gt;我不确定&lt;/button&gt;
        &lt;button id=&quot;unknown&quot;&gt;我不认识&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;completion-message&quot; id=&quot;completion-message&quot;&gt;
        &lt;h2&gt;🎉 恭喜！您已完成所有单词的学习！&lt;/h2&gt;
        &lt;p&gt;以下是您需要复习的单词：&lt;/p&gt;
        &lt;div id=&quot;review-words&quot;&gt;&lt;/div&gt;
        &lt;button onclick=&quot;startReview()&quot; class=&quot;action-button&quot;&gt;开始复习&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
        &lt;h3 class=&quot;review-title&quot;&gt;📚 复习单词列表&lt;/h3&gt;
        &lt;ul class=&quot;review-list&quot; id=&quot;review-list&quot;&gt;&lt;/ul&gt;
        &lt;button onclick=&quot;finishReview()&quot; class=&quot;action-button&quot;&gt;完成复习&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        const words = [
            {
                word: &quot;barbecue&quot;,
                phonetic: &quot;[ˈbɑːbɪkjuː]&quot;,
                meaning: &quot;烧烤&quot;,
                example: &quot;We&#x27;re having a barbecue in the garden this weekend. (这个周末我们将在花园里烧烤。)&quot;
            },
            {
                word: &quot;beach&quot;,
                phonetic: &quot;[biːtʃ]&quot;,
                meaning: &quot;海滩&quot;,
                example: &quot;Let&#x27;s go to the beach this afternoon. (今天下午我们去海滩吧。)&quot;
            },
            {
                word: &quot;bicycle&quot;,
                phonetic: &quot;[ˈbaɪsɪkl]&quot;,
                meaning: &quot;自行车&quot;,
                example: &quot;I ride my bicycle to work every day. (我每天骑自行车上班。)&quot;
            },
            {
                word: &quot;bike&quot;,
                phonetic: &quot;[baɪk]&quot;,
                meaning: &quot;自行车；摩托车&quot;,
                example: &quot;She got a new bike for her birthday. (她生日得到了一辆新自行车。)&quot;
            },
            {
                word: &quot;book&quot;,
                phonetic: &quot;[bʊk]&quot;,
                meaning: &quot;书；预订&quot;,
                example: &quot;I&#x27;m reading an interesting book about history. (我正在读一本有趣的历史书。)&quot;
            },
            {
                word: &quot;camera&quot;,
                phonetic: &quot;[ˈkæmərə]&quot;,
                meaning: &quot;照相机&quot;,
                example: &quot;Don&#x27;t forget to bring your camera on the trip. (旅行时别忘了带相机。)&quot;
            },
            {
                word: &quot;camp&quot;,
                phonetic: &quot;[kæmp]&quot;,
                meaning: &quot;露营；营地&quot;,
                example: &quot;We camped by the lake last summer. (去年夏天我们在湖边露营。)&quot;
            },
            {
                word: &quot;camping&quot;,
                phonetic: &quot;[ˈkæmpɪŋ]&quot;,
                meaning: &quot;露营&quot;,
                example: &quot;Camping is a great way to get close to nature. (露营是亲近大自然的好方法。)&quot;
            },
            {
                word: &quot;campsite&quot;,
                phonetic: &quot;[ˈkæmpsaɪt]&quot;,
                meaning: &quot;露营地&quot;,
                example: &quot;We booked a campsite near the river. (我们预订了河边的露营地。)&quot;
            },
            {
                word: &quot;CD (player)&quot;,
                phonetic: &quot;[ˌsiː ˈdiː (ˈpleɪə(r))]&quot;,
                meaning: &quot;CD(播放器)&quot;,
                example: &quot;I still have a collection of old CDs. (我仍然收藏着一些旧CD。)&quot;
            },
            {
                word: &quot;club&quot;,
                phonetic: &quot;[klʌb]&quot;,
                meaning: &quot;俱乐部；社团&quot;,
                example: &quot;She joined the school drama club. (她加入了学校的戏剧社。)&quot;
            },
            {
                word: &quot;collect (v)&quot;,
                phonetic: &quot;[kəˈlekt]&quot;,
                meaning: &quot;收集&quot;,
                example: &quot;My brother collects stamps from different countries. (我哥哥收集不同国家的邮票。)&quot;
            },
            {
                word: &quot;computer&quot;,
                phonetic: &quot;[kəmˈpjuːtə(r)]&quot;,
                meaning: &quot;计算机；电脑&quot;,
                example: &quot;I use my computer for work and entertainment. (我用电脑工作和娱乐。)&quot;
            },
            {
                word: &quot;cycling&quot;,
                phonetic: &quot;[ˈsaɪklɪŋ]&quot;,
                meaning: &quot;骑自行车运动&quot;,
                example: &quot;Cycling is good for your health and the environment. (骑自行车对健康和环境都有好处。)&quot;
            },
            {
                word: &quot;dance (n &amp; v)&quot;,
                phonetic: &quot;[dɑːns]&quot;,
                meaning: &quot;舞蹈；跳舞&quot;,
                example: &quot;They danced all night at the party. (他们在派对上跳了一整晚舞。)&quot;
            },
            {
                word: &quot;draw&quot;,
                phonetic: &quot;[drɔː]&quot;,
                meaning: &quot;画；绘画&quot;,
                example: &quot;She likes to draw pictures of animals. (她喜欢画动物。)&quot;
            },
            {
                word: &quot;DVD (player)&quot;,
                phonetic: &quot;[ˌdiː viː ˈdiː (ˈpleɪə(r))]&quot;,
                meaning: &quot;DVD(播放器)&quot;,
                example: &quot;We watched a movie on the DVD player. (我们用DVD播放器看电影。)&quot;
            },
            {
                word: &quot;festival&quot;,
                phonetic: &quot;[ˈfestɪvl]&quot;,
                meaning: &quot;节日；庆典&quot;,
                example: &quot;The music festival attracts thousands of visitors. (这个音乐节吸引了成千上万的游客。)&quot;
            },
            {
                word: &quot;go out&quot;,
                phonetic: &quot;[ɡəʊ aʊt]&quot;,
                meaning: &quot;外出；出去&quot;,
                example: &quot;Let&#x27;s go out for dinner tonight. (今晚我们出去吃晚饭吧。)&quot;
            },
            {
                word: &quot;go shopping&quot;,
                phonetic: &quot;[ɡəʊ ˈʃɒpɪŋ]&quot;,
                meaning: &quot;购物&quot;,
                example: &quot;I usually go shopping on weekends. (我通常在周末购物。)&quot;
            },
            {
                word: &quot;guitar&quot;,
                phonetic: &quot;[ɡɪˈtɑː(r)]&quot;,
                meaning: &quot;吉他&quot;,
                example: &quot;He plays the guitar in a band. (他在乐队里弹吉他。)&quot;
            },
            {
                word: &quot;hobby&quot;,
                phonetic: &quot;[ˈhɒbi]&quot;,
                meaning: &quot;爱好&quot;,
                example: &quot;Gardening is my favorite hobby. (园艺是我最喜欢的爱好。)&quot;
            },
            {
                word: &quot;holidays&quot;,
                phonetic: &quot;[ˈhɒlədeɪz]&quot;,
                meaning: &quot;假期&quot;,
                example: &quot;We&#x27;re going to Spain for our summer holidays. (我们暑假要去西班牙。)&quot;
            },
            {
                word: &quot;join&quot;,
                phonetic: &quot;[dʒɔɪn]&quot;,
                meaning: &quot;加入；参加&quot;,
                example: &quot;I want to join the photography club. (我想加入摄影俱乐部。)&quot;
            },
            {
                word: &quot;magazine&quot;,
                phonetic: &quot;[ˌmæɡəˈziːn]&quot;,
                meaning: &quot;杂志&quot;,
                example: &quot;I buy a fashion magazine every month. (我每个月买一本时尚杂志。)&quot;
            },
            {
                word: &quot;member&quot;,
                phonetic: &quot;[ˈmembə(r)]&quot;,
                meaning: &quot;成员&quot;,
                example: &quot;She&#x27;s been a member of the gym for two years. (她成为这家健身房的会员已经两年了。)&quot;
            },
            {
                word: &quot;MP3 player&quot;,
                phonetic: &quot;[ˌem piː ˈθriː ˈpleɪə(r)]&quot;,
                meaning: &quot;MP3播放器&quot;,
                example: &quot;I listen to music on my MP3 player when I jog. (我慢跑时用MP3播放器听音乐。)&quot;
            },
            {
                word: &quot;museum&quot;,
                phonetic: &quot;[mjuˈziːəm]&quot;,
                meaning: &quot;博物馆&quot;,
                example: &quot;We visited the science museum yesterday. (昨天我们参观了科学博物馆。)&quot;
            },
            {
                word: &quot;music&quot;,
                phonetic: &quot;[ˈmjuːzɪk]&quot;,
                meaning: &quot;音乐&quot;,
                example: &quot;What kind of music do you like? (你喜欢什么类型的音乐？)&quot;
            },
            {
                word: &quot;musician&quot;,
                phonetic: &quot;[mjuˈzɪʃn]&quot;,
                meaning: &quot;音乐家&quot;,
                example: &quot;He&#x27;s a talented musician who plays several instruments. (他是个有才华的音乐家，会演奏多种乐器。)&quot;
            },
            {
                word: &quot;paint (n &amp; v)&quot;,
                phonetic: &quot;[peɪnt]&quot;,
                meaning: &quot;油漆；绘画&quot;,
                example: &quot;She paints beautiful landscapes. (她画美丽的风景画。)&quot;
            },
            {
                word: &quot;park&quot;,
                phonetic: &quot;[pɑːk]&quot;,
                meaning: &quot;公园；停车场&quot;,
                example: &quot;Let&#x27;s have a picnic in the park. (我们去公园野餐吧。)&quot;
            },
            {
                word: &quot;party&quot;,
                phonetic: &quot;[ˈpɑːti]&quot;,
                meaning: &quot;派对；聚会&quot;,
                example: &quot;We&#x27;re having a birthday party for my sister. (我们要为我妹妹举办生日派对。)&quot;
            },
            {
                word: &quot;photograph (n &amp; v)&quot;,
                phonetic: &quot;[ˈfəʊtəɡrɑːf]&quot;,
                meaning: &quot;照片；拍照&quot;,
                example: &quot;I took a photograph of the sunset. (我拍了一张日落的照片。)&quot;
            },
            {
                word: &quot;picnic&quot;,
                phonetic: &quot;[ˈpɪknɪk]&quot;,
                meaning: &quot;野餐&quot;,
                example: &quot;We had a picnic by the lake last Sunday. (上周日我们在湖边野餐。)&quot;
            },
            {
                word: &quot;quiz&quot;,
                phonetic: &quot;[kwɪz]&quot;,
                meaning: &quot;测验；知识竞赛&quot;,
                example: &quot;There&#x27;s a quiz show on TV tonight. (今晚电视上有个智力竞赛节目。)&quot;
            },
            {
                word: &quot;tent&quot;,
                phonetic: &quot;[tent]&quot;,
                meaning: &quot;帐篷&quot;,
                example: &quot;We slept in a tent during our camping trip. (我们在露营旅行时睡在帐篷里。)&quot;
            },
            {
                word: &quot;video game&quot;,
                phonetic: &quot;[ˈvɪdiəʊ ɡeɪm]&quot;,
                meaning: &quot;电子游戏&quot;,
                example: &quot;My brother loves playing video games. (我弟弟喜欢玩电子游戏。)&quot;
            }
        ];

        let currentIndex = 0;
        let remainingWords = [...words];
        let knownWords = [];
        let unknownWords = [];
        let unsureWords = [];
        let isReviewMode = false;
        let reviewWords = [];
        
        const card = document.getElementById(&#x27;card&#x27;);
        const wordElement = document.getElementById(&#x27;word&#x27;);
        const phoneticElement = document.getElementById(&#x27;phonetic&#x27;);
        const meaningElement = document.getElementById(&#x27;meaning&#x27;);
        const exampleElement = document.getElementById(&#x27;example&#x27;);
        const progressText = document.getElementById(&#x27;progress-text&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);
        const completionMessage = document.getElementById(&#x27;completion-message&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewList = document.getElementById(&#x27;review-list&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);

        // Initialize
        shuffleArray(remainingWords);
        updateCard();

        // Event listeners
        document.getElementById(&#x27;known&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;known&#x27;));
        document.getElementById(&#x27;unknown&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unknown&#x27;));
        document.getElementById(&#x27;unsure&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unsure&#x27;));
        
        document.addEventListener(&#x27;keydown&#x27;, function(event) {
            if (event.key === &#x27;1&#x27;) {
                markWord(&#x27;known&#x27;);
            } else if (event.key === &#x27;2&#x27;) {
                markWord(&#x27;unknown&#x27;);
            } else if (event.key === &#x27;3&#x27;) {
                markWord(&#x27;unsure&#x27;);
            } else if (event.key === &#x27; &#x27; || event.key === &#x27;Enter&#x27;) {
                flipCard();
            }
        });

        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        function updateCard() {
            if (remainingWords.length === 0) {
                if (!isReviewMode &amp;&amp; (unknownWords.length &gt; 0 || unsureWords.length &gt; 0)) {
                    showCompletionMessage();
                } else if (isReviewMode &amp;&amp; reviewWords.length === 0) {
                    finishReview();
                } else {
                    // All words are known, no need to review
                    showCompletionMessage();
                }
                return;
            }
            
            const currentWord = remainingWords[0];
            wordElement.textContent = currentWord.word;
            phoneticElement.textContent = currentWord.phonetic;
            meaningElement.textContent = currentWord.meaning;
            exampleElement.textContent = currentWord.example;
            
            const totalWords = words.length;
            const learnedWords = totalWords - remainingWords.length + 1;
            const progressPercentage = (learnedWords / totalWords) * 100;
            
            progressText.textContent = `进度: ${learnedWords}/${totalWords}`;
            progressBar.style.width = `${progressPercentage}%`;
            
            // Reset card to front view when changing words
            if (card.classList.contains(&#x27;flipped&#x27;)) {
                card.classList.remove(&#x27;flipped&#x27;);
            }
        }

        function markWord(status) {
            if (remainingWords.length === 0) return;
            
            const currentWord = remainingWords.shift();
            
            switch (status) {
                case &#x27;known&#x27;:
                    knownWords.push(currentWord);
                    break;
                case &#x27;unknown&#x27;:
                    unknownWords.push(currentWord);
                    break;
                case &#x27;unsure&#x27;:
                    unsureWords.push(currentWord);
                    break;
            }
            
            updateCard();
        }

        function showCompletionMessage() {
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.flip-hint&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-text&#x27;).style.display = &#x27;none&#x27;;
            
            let reviewWordsList = &#x27;&#x27;;
            
            if (unknownWords.length &gt; 0) {
                reviewWordsList += &#x27;&lt;div style=&quot;margin-bottom: 20px;&quot;&gt;&#x27;;
                reviewWordsList += &#x27;&lt;h3 style=&quot;color: var(--danger-color); margin-bottom: 10px;&quot;&gt;我不认识的单词&lt;/h3&gt;&#x27;;
                reviewWordsList += &#x27;&lt;ul style=&quot;text-align: left; padding-left: 20px;&quot;&gt;&#x27;;
                unknownWords.forEach(word =&gt; {
                    reviewWordsList += `&lt;li&gt;&lt;strong&gt;${word.word}&lt;/strong&gt; - ${word.meaning}&lt;/li&gt;`;
                });
                reviewWordsList += &#x27;&lt;/ul&gt;&lt;/div&gt;&#x27;;
            }
            
            if (unsureWords.length &gt; 0) {
                reviewWordsList += &#x27;&lt;div&gt;&#x27;;
                reviewWordsList += &#x27;&lt;h3 style=&quot;color: var(--warning-color); margin-bottom: 10px;&quot;&gt;我不确定的单词&lt;/h3&gt;&#x27;;
                reviewWordsList += &#x27;&lt;ul style=&quot;text-align: left; padding-left: 20px;&quot;&gt;&#x27;;
                unsureWords.forEach(word =&gt; {
                    reviewWordsList += `&lt;li&gt;&lt;strong&gt;${word.word}&lt;/strong&gt; - ${word.meaning}&lt;/li&gt;`;
                });
                reviewWordsList += &#x27;&lt;/ul&gt;&lt;/div&gt;&#x27;;
            }
            
            if (unknownWords.length === 0 &amp;&amp; unsureWords.length === 0) {
                completionMessage.innerHTML = `
                    &lt;h2&gt;🎉 恭喜！您已掌握所有单词！&lt;/h2&gt;
                    &lt;p&gt;您已经完成了所有32个单词的学习，并且全部标记为&quot;我认识&quot;！&lt;/p&gt;
                    &lt;button onclick=&quot;location.reload()&quot; class=&quot;action-button&quot;&gt;重新开始&lt;/button&gt;
                `;
            } else {
                reviewWordsContainer.innerHTML = reviewWordsList;
            }
            
            completionMessage.style.display = &#x27;block&#x27;;
        }

        function startReview() {
            completionMessage.style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;block&#x27;;
            
            // Combine unknown and unsure words for review
            reviewWords = [...unknownWords, ...unsureWords];
            shuffleArray(reviewWords);
            unknownWords = [];
            unsureWords = [];
            isReviewMode = true;
            
            // Update remaining words for review
            remainingWords = [...reviewWords];
            reviewWords = [];
            
            // Show review list
            updateReviewList();
            
            // Show card and controls again
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.flip-hint&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-text&#x27;).style.display = &#x27;block&#x27;;
            
            // Start reviewing
            updateCard();
        }

        function updateReviewList() {
            reviewList.innerHTML = &#x27;&#x27;;
            const allReviewWords = [...unknownWords, ...unsureWords, ...remainingWords];
            
            allReviewWords.forEach(word =&gt; {
                const li = document.createElement(&#x27;li&#x27;);
                li.className = &#x27;review-item&#x27;;
                li.innerHTML = `
                    &lt;span class=&quot;review-word&quot;&gt;${word.word}&lt;/span&gt;
                    &lt;span class=&quot;review-meaning&quot;&gt;${word.meaning}&lt;/span&gt;
                `;
                reviewList.appendChild(li);
            });
        }

        function finishReview() {
            isReviewMode = false;
            reviewSection.style.display = &#x27;none&#x27;;
            
            if (unknownWords.length === 0 &amp;&amp; unsureWords.length === 0) {
                // All words are known now
                completionMessage.innerHTML = `
                    &lt;h2&gt;🎉 恭喜！您已掌握所有单词！&lt;/h2&gt;
                    &lt;p&gt;您已经完成了所有32个单词的学习，包括复习部分。&lt;/p&gt;
                    &lt;button onclick=&quot;location.reload()&quot; class=&quot;action-button&quot;&gt;重新开始&lt;/button&gt;
                `;
            } else {
                // Still some words to review
                showCompletionMessage();
            }
        }

        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="12-住宅和家庭" class="section">
      <div class="section-header">
        <h2>12 住宅和家庭</h2>
        <div class="section-actions">
          <button onclick="openStandalone('12 住宅和家庭.html')">打开原文件</button>
          <button onclick="toggleHeight('12-住宅和家庭')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;住宅和家单词学习卡片&lt;/title&gt;
    &lt;style&gt;
        :root {
            --primary-color: #4361ee;
            --success-color: #4cc9f0;
            --warning-color: #f8961e;
            --danger-color: #f94144;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }
        
        body {
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            color: var(--dark-color);
        }
        
        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
        
        .card-container {
            perspective: 1000px;
            width: 100%;
            max-width: 500px;
            margin-bottom: 30px;
        }
        
        .card {
            position: relative;
            width: 100%;
            height: 300px;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-radius: 15px;
            background: white;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            padding: 30px;
            box-sizing: border-box;
            background: white;
        }
        
        .card-front {
            border: 2px solid var(--primary-color);
        }
        
        .card-back {
            border: 2px solid var(--success-color);
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            color: var(--primary-color);
        }
        
        .phonetic {
            font-size: 1.3rem;
            margin-bottom: 20px;
            font-style: italic;
            color: #6c757d;
        }
        
        .meaning {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: center;
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .example {
            font-size: 1.1rem;
            text-align: center;
            line-height: 1.6;
            padding: 15px;
            background-color: rgba(76, 201, 240, 0.1);
            border-radius: 10px;
            width: 90%;
            color: #495057;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
            width: 100%;
            max-width: 500px;
            flex-wrap: wrap;
        }
        
        button {
            border: none;
            color: white;
            padding: 12px 25px;
            text-align: center;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 50px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            min-width: 140px;
            letter-spacing: 0.5px;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        #known {
            background: linear-gradient(135deg, var(--success-color) 0%, #38a3a5 100%);
        }
        
        #unknown {
            background: linear-gradient(135deg, var(--danger-color) 0%, #d62839 100%);
        }
        
        #unsure {
            background: linear-gradient(135deg, var(--warning-color) 0%, #f3722c 100%);
        }
        
        .progress-container {
            width: 100%;
            max-width: 500px;
            background: #e9ecef;
            border-radius: 10px;
            height: 10px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color) 0%, #4895ef 100%);
            border-radius: 10px;
            transition: width 0.4s ease;
        }
        
        .progress-text {
            text-align: center;
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 5px;
        }
        
        .completion-message {
            display: none;
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 500px;
            margin: 20px auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid var(--success-color);
        }
        
        .completion-message h2 {
            color: var(--success-color);
            margin-bottom: 20px;
        }
        
        .review-section {
            display: none;
            width: 100%;
            max-width: 500px;
            margin-top: 30px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid var(--warning-color);
        }
        
        .review-title {
            color: var(--warning-color);
            text-align: center;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .review-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .review-item {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.2s;
        }
        
        .review-item:hover {
            background: #f8f9fa;
        }
        
        .review-word {
            font-weight: bold;
            color: var(--dark-color);
        }
        
        .review-meaning {
            color: #6c757d;
        }
        
        .action-button {
            display: block;
            margin: 25px auto 0;
            background: var(--primary-color);
            width: 200px;
        }
        
        .flip-hint {
            text-align: center;
            color: #6c757d;
            font-size: 0.9rem;
            margin-top: 15px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        @media (max-width: 576px) {
            .card {
                height: 280px;
            }
            
            .word {
                font-size: 2rem;
            }
            
            .meaning {
                font-size: 1.3rem;
            }
            
            button {
                min-width: 120px;
                padding: 10px 20px;
            }
            
            .controls {
                gap: 10px;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;住宅和家单词学习卡片&lt;/h1&gt;
    
    &lt;div class=&quot;progress-text&quot; id=&quot;progress-text&quot;&gt;进度: 1/47&lt;/div&gt;
    &lt;div class=&quot;progress-container&quot;&gt;
        &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot; style=&quot;width: 2.13%&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;card-container&quot;&gt;
        &lt;div class=&quot;card&quot; id=&quot;card&quot; onclick=&quot;flipCard()&quot;&gt;
            &lt;div class=&quot;card-face card-front&quot;&gt;
                &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;Word&lt;/div&gt;
                &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;Phonetic&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-face card-back&quot;&gt;
                &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;Meaning&lt;/div&gt;
                &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;Example sentence will appear here&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
    
    &lt;div class=&quot;controls&quot;&gt;
        &lt;button id=&quot;known&quot;&gt;我认识&lt;/button&gt;
        &lt;button id=&quot;unsure&quot;&gt;我不确定&lt;/button&gt;
        &lt;button id=&quot;unknown&quot;&gt;我不认识&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;completion-message&quot; id=&quot;completion-message&quot;&gt;
        &lt;h2&gt;🎉 恭喜！您已完成所有单词的学习！&lt;/h2&gt;
        &lt;p&gt;以下是您需要复习的单词：&lt;/p&gt;
        &lt;div id=&quot;review-words&quot;&gt;&lt;/div&gt;
        &lt;button onclick=&quot;startReview()&quot; class=&quot;action-button&quot;&gt;开始复习&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
        &lt;h3 class=&quot;review-title&quot;&gt;📚 复习单词列表&lt;/h3&gt;
        &lt;ul class=&quot;review-list&quot; id=&quot;review-list&quot;&gt;&lt;/ul&gt;
        &lt;button onclick=&quot;finishReview()&quot; class=&quot;action-button&quot;&gt;完成复习&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        const words = [
            {
                word: &quot;address&quot;,
                phonetic: &quot;[ə&#x27;dres]&quot;,
                meaning: &quot;住址；地址&quot;,
                example: &quot;Please write your full address on the application form. (请在申请表上写下您的完整地址。)&quot;
            },
            {
                word: &quot;apartment&quot;,
                phonetic: &quot;[ə&#x27;pa:tmənt]&quot;,
                meaning: &quot;公寓套房&quot;,
                example: &quot;They live in a small apartment in the city center. (他们住在市中心的一间小公寓里。)&quot;
            },
            {
                word: &quot;armchair&quot;,
                phonetic: &quot;[&#x27;a:mtʃeə(r)]&quot;,
                meaning: &quot;扶手椅&quot;,
                example: &quot;Grandfather likes to read newspapers in his comfortable armchair. (爷爷喜欢坐在舒适的扶手椅上看报纸。)&quot;
            },
            {
                word: &quot;bath(tub)&quot;,
                phonetic: &quot;[ba:θ] ([tʌb])&quot;,
                meaning: &quot;洗澡；洗浴（浴缸；浴盆）&quot;,
                example: &quot;The baby enjoys splashing in the bathtub. (宝宝喜欢在浴缸里玩水。)&quot;
            },
            {
                word: &quot;bathroom&quot;,
                phonetic: &quot;[&#x27;ba:θru:m]&quot;,
                meaning: &quot;浴室&quot;,
                example: &quot;There are two bathrooms in our new house. (我们的新房子里有两间浴室。)&quot;
            },
            {
                word: &quot;bed&quot;,
                phonetic: &quot;[bed]&quot;,
                meaning: &quot;床&quot;,
                example: &quot;I need to buy a new bed because my old one is too small. (我需要买一张新床，因为旧床太小了。)&quot;
            },
            {
                word: &quot;bedroom&quot;,
                phonetic: &quot;[&#x27;bedru:m]&quot;,
                meaning: &quot;卧室&quot;,
                example: &quot;My bedroom has a large window with a nice view. (我的卧室有一扇大窗户，视野很好。)&quot;
            },
            {
                word: &quot;bin&quot;,
                phonetic: &quot;[bm]&quot;,
                meaning: &quot;垃圾箱&quot;,
                example: &quot;Please throw the empty bottle in the recycling bin. (请把空瓶子扔进回收箱。)&quot;
            },
            {
                word: &quot;blanket&quot;,
                phonetic: &quot;[&#x27;blæŋkt]&quot;,
                meaning: &quot;毯子；毛毯&quot;,
                example: &quot;It&#x27;s cold tonight - I need an extra blanket on my bed. (今晚很冷，我需要在床上加一条毯子。)&quot;
            },
            {
                word: &quot;bookcase&quot;,
                phonetic: &quot;[&#x27;bokkers]&quot;,
                meaning: &quot;书架；书柜&quot;,
                example: &quot;All my favorite books are on the top shelf of the bookcase. (我最喜欢的书都在书柜的顶层。)&quot;
            },
            {
                word: &quot;bookshelf&quot;,
                phonetic: &quot;[&#x27;bɔkʃelf]&quot;,
                meaning: &quot;书架&quot;,
                example: &quot;I need to buy another bookshelf for my growing book collection. (我需要再买一个书架来放我越来越多的书。)&quot;
            },
            {
                word: &quot;bowl&quot;,
                phonetic: &quot;[bəʊl]&quot;,
                meaning: &quot;碗；钵；盆&quot;,
                example: &quot;Could you pass me that bowl of soup, please? (请把那碗汤递给我好吗？)&quot;
            },
            {
                word: &quot;box&quot;,
                phonetic: &quot;[bɒks]&quot;,
                meaning: &quot;盒；箱；匣&quot;,
                example: &quot;I keep all my old photos in a cardboard box under the bed. (我把所有旧照片都放在床下的纸箱里。)&quot;
            },
            {
                word: &quot;carpet&quot;,
                phonetic: &quot;[&#x27;ka:prt]&quot;,
                meaning: &quot;地毯&quot;,
                example: &quot;The living room carpet needs to be vacuumed. (客厅的地毯需要吸尘了。)&quot;
            },
            {
                word: &quot;chair&quot;,
                phonetic: &quot;[tʃeə(r)]&quot;,
                meaning: &quot;椅子&quot;,
                example: &quot;Please pull up a chair and join us for dinner. (请拉把椅子过来和我们一起吃晚饭吧。)&quot;
            },
            {
                word: &quot;clock&quot;,
                phonetic: &quot;[klɒk]&quot;,
                meaning: &quot;时钟；钟&quot;,
                example: &quot;The clock on the wall says it&#x27;s already 3 o&#x27;clock. (墙上的钟显示已经3点了。)&quot;
            },
            {
                word: &quot;closet&quot;,
                phonetic: &quot;[&#x27;klɒzrt]&quot;,
                meaning: &quot;贮藏室；壁橱&quot;,
                example: &quot;All our winter coats are stored in the hall closet. (我们所有的冬衣都放在门厅的壁橱里。)&quot;
            },
            {
                word: &quot;computer&quot;,
                phonetic: &quot;[kəm&#x27;pju:tə(r)]&quot;,
                meaning: &quot;计算机；电脑&quot;,
                example: &quot;I use my computer for work and for watching movies. (我用电脑工作和看电影。)&quot;
            },
            {
                word: &quot;cooker&quot;,
                phonetic: &quot;[&#x27;kɒkə(r)]&quot;,
                meaning: &quot;厨灶，炉具&quot;,
                example: &quot;We bought a new gas cooker for the kitchen. (我们为厨房买了一个新的燃气灶。)&quot;
            },
            {
                word: &quot;cupboard&quot;,
                phonetic: &quot;[&#x27;kʌbəd]&quot;,
                meaning: &quot;橱柜；食物柜；衣柜&quot;,
                example: &quot;The plates are in the cupboard above the sink. (盘子在水槽上方的橱柜里。)&quot;
            },
            {
                word: &quot;curtain&quot;,
                phonetic: &quot;[&#x27;kɜ:tn]&quot;,
                meaning: &quot;窗帘&quot;,
                example: &quot;Could you draw the curtains? The sun is too bright. (你能拉上窗帘吗？太阳太亮了。)&quot;
            },
            {
                word: &quot;desk&quot;,
                phonetic: &quot;[desk]&quot;,
                meaning: &quot;书桌；写字台；办公桌&quot;,
                example: &quot;My desk is always messy with papers and books. (我的书桌上总是堆满了文件和书。)&quot;
            },
            {
                word: &quot;dining room&quot;,
                phonetic: &quot;[daɪnɪŋ][ru:m]&quot;,
                meaning: &quot;餐厅；饭厅&quot;,
                example: &quot;We usually eat breakfast in the kitchen and dinner in the dining room. (我们通常在厨房吃早餐，在餐厅吃晚餐。)&quot;
            },
            {
                word: &quot;door&quot;,
                phonetic: &quot;[do:(r)]&quot;,
                meaning: &quot;门&quot;,
                example: &quot;Please close the door behind you when you leave. (离开时请随手关门。)&quot;
            },
            {
                word: &quot;downstairs&quot;,
                phonetic: &quot;[ˌdaʊn&#x27;steəz]&quot;,
                meaning: &quot;在楼下；往楼下&quot;,
                example: &quot;The laundry room is downstairs next to the garage. (洗衣房在楼下，车库旁边。)&quot;
            },
            {
                word: &quot;drawer&quot;,
                phonetic: &quot;[drɔ:(r)]&quot;,
                meaning: &quot;抽屉&quot;,
                example: &quot;I keep my socks in the top drawer of the dresser. (我把袜子放在梳妆台最上面的抽屉里。)&quot;
            },
            {
                word: &quot;DVD (player)&quot;,
                phonetic: &quot;DVD 播放器&quot;,
                meaning: &quot;DVD播放器&quot;,
                example: &quot;We watched a movie on the DVD player last night. (昨晚我们用DVD播放器看了一部电影。)&quot;
            },
            {
                word: &quot;entrance&quot;,
                phonetic: &quot;[&#x27;entrəns]&quot;,
                meaning: &quot;大门（口）；入口（处）&quot;,
                example: &quot;The main entrance to the building is on the north side. (大楼的主入口在北侧。)&quot;
            },
            {
                word: &quot;flat (n)&quot;,
                phonetic: &quot;[flæt]&quot;,
                meaning: &quot;公寓；单元房&quot;,
                example: &quot;She rents a small flat near the university. (她在大学附近租了一间小公寓。)&quot;
            },
            {
                word: &quot;floor&quot;,
                phonetic: &quot;[flɔ:(r)]&quot;,
                meaning: &quot;地板；地面&quot;,
                example: &quot;The baby is crawling on the floor. (宝宝正在地板上爬。)&quot;
            },
            {
                word: &quot;fridge&quot;,
                phonetic: &quot;[frɪdʒ]&quot;,
                meaning: &quot;冰箱&quot;,
                example: &quot;Put the milk back in the fridge after using it. (用完牛奶后把它放回冰箱。)&quot;
            },
            {
                word: &quot;furniture&quot;,
                phonetic: &quot;[&#x27;fa:nɪtʃə(r)]&quot;,
                meaning: &quot;家具&quot;,
                example: &quot;We need to buy some new furniture for the living room. (我们需要为客厅买些新家具。)&quot;
            },
            {
                word: &quot;garage&quot;,
                phonetic: &quot;[&#x27;ɡærɑ:ʒ]&quot;,
                meaning: &quot;停车房；车库&quot;,
                example: &quot;My father keeps his tools in the garage. (我父亲把他的工具放在车库里。)&quot;
            },
            {
                word: &quot;garden&quot;,
                phonetic: &quot;[&#x27;ɡɑ:dn]&quot;,
                meaning: &quot;园圃，花园&quot;,
                example: &quot;We grow vegetables and flowers in our back garden. (我们在后花园种植蔬菜和花卉。)&quot;
            },
            {
                word: &quot;gas&quot;,
                phonetic: &quot;[ɡæs]&quot;,
                meaning: &quot;气体&quot;,
                example: &quot;Be careful not to leave the gas on when you finish cooking. (做完饭后小心别让煤气开着。)&quot;
            },
            {
                word: &quot;gate&quot;,
                phonetic: &quot;[ɡert]&quot;,
                meaning: &quot;大门&quot;,
                example: &quot;Please close the garden gate so the dog doesn&#x27;t get out. (请关上花园大门，免得狗跑出去。)&quot;
            },
            {
                word: &quot;hall&quot;,
                phonetic: &quot;[hɔ:l]&quot;,
                meaning: &quot;门厅；礼堂；大厅&quot;,
                example: &quot;Hang your coat in the hall closet. (把你的外套挂在门厅的壁橱里。)&quot;
            },
            {
                word: &quot;heating&quot;,
                phonetic: &quot;[&#x27;hi:trŋ]&quot;,
                meaning: &quot;供暖系统；暖气设备&quot;,
                example: &quot;We turn the heating on in October when it gets cold. (我们在十月份天气变冷时打开暖气。)&quot;
            },
            {
                word: &quot;home&quot;,
                phonetic: &quot;[heʊm]&quot;,
                meaning: &quot;家；住所&quot;,
                example: &quot;After a long trip, it&#x27;s always nice to come home. (长途旅行后，回家总是很愉快。)&quot;
            },
            {
                word: &quot;house&quot;,
                phonetic: &quot;[haʊs]&quot;,
                meaning: &quot;房子；住宅&quot;,
                example: &quot;They bought a beautiful house by the lake. (他们在湖边买了一栋漂亮的房子。)&quot;
            },
            {
                word: &quot;key&quot;,
                phonetic: &quot;[ki:]&quot;,
                meaning: &quot;钥匙&quot;,
                example: &quot;I can&#x27;t find my house keys - have you seen them? (我找不到家门钥匙了，你看到了吗？)&quot;
            },
            {
                word: &quot;kitchen&quot;,
                phonetic: &quot;[&#x27;kɪtʃɪn]&quot;,
                meaning: &quot;厨房&quot;,
                example: &quot;The smell of fresh bread is coming from the kitchen. (新鲜面包的香味从厨房飘来。)&quot;
            },
            {
                word: &quot;lamp&quot;,
                phonetic: &quot;[laemp]&quot;,
                meaning: &quot;灯&quot;,
                example: &quot;I read by the light of a bedside lamp. (我借着床头灯的灯光阅读。)&quot;
            },
            {
                word: &quot;light&quot;,
                phonetic: &quot;[latt]&quot;,
                meaning: &quot;（尤指）电灯；光源&quot;,
                example: &quot;Could you turn on the light? It&#x27;s too dark in here. (你能开灯吗？这里太暗了。)&quot;
            },
            {
                word: &quot;live (v)&quot;,
                phonetic: &quot;[lɪv]&quot;,
                meaning: &quot;居住；（以某种方式）生活&quot;,
                example: &quot;I&#x27;ve lived in this city for ten years. (我在这个城市住了十年了。)&quot;
            },
            {
                word: &quot;living room&quot;,
                phonetic: &quot;[&#x27;lɪvɪŋ ruːm]&quot;,
                meaning: &quot;客厅；起居室&quot;,
                example: &quot;We spend most of our evenings in the living room watching TV. (我们大多数晚上都在客厅看电视。)&quot;
            },
            {
                word: &quot;oven&quot;,
                phonetic: &quot;[&#x27;ʌvn]&quot;,
                meaning: &quot;烤箱；烤炉&quot;,
                example: &quot;The cake needs to bake in the oven for 30 minutes. (蛋糕需要在烤箱里烤30分钟。)&quot;
            },
            {
                word: &quot;pillow&quot;,
                phonetic: &quot;[&#x27;pɪləʊ]&quot;,
                meaning: &quot;枕头&quot;,
                example: &quot;I prefer soft pillows to hard ones. (比起硬枕头，我更喜欢软的。)&quot;
            },
            {
                word: &quot;refrigerator&quot;,
                phonetic: &quot;[rɪˈfrɪdʒərette(r)]&quot;,
                meaning: &quot;冰箱，冷藏库&quot;,
                example: &quot;Put the leftovers in the refrigerator so they don&#x27;t spoil. (把剩菜放进冰箱，免得变质。)&quot;
            },
            {
                word: &quot;roof&quot;,
                phonetic: &quot;[ruːf]&quot;,
                meaning: &quot;屋顶&quot;,
                example: &quot;The cat climbed onto the roof and couldn&#x27;t get down. (猫爬上了屋顶，下不来了。)&quot;
            },
            {
                word: &quot;room&quot;,
                phonetic: &quot;[ruːm]&quot;,
                meaning: &quot;房间；室&quot;,
                example: &quot;This house has four bedrooms and two bathrooms. (这栋房子有四间卧室和两间浴室。)&quot;
            },
            {
                word: &quot;rubbish&quot;,
                phonetic: &quot;[&#x27;rʌbɪʃ]&quot;,
                meaning: &quot;垃圾；废弃物&quot;,
                example: &quot;Take the rubbish out when you leave, please. (离开时请把垃圾带出去。)&quot;
            },
            {
                word: &quot;safe (adj)&quot;,
                phonetic: &quot;[seɪf]&quot;,
                meaning: &quot;安全的&quot;,
                example: &quot;Make sure all your valuables are in a safe place. (确保你所有的贵重物品都放在安全的地方。)&quot;
            },
            {
                word: &quot;sheet&quot;,
                phonetic: &quot;[ʃiːt]&quot;,
                meaning: &quot;床单；被单&quot;,
                example: &quot;I change the sheets on my bed every week. (我每周更换床单。)&quot;
            },
            {
                word: &quot;shelf&quot;,
                phonetic: &quot;[ʃelf]&quot;,
                meaning: &quot;架子&quot;,
                example: &quot;All my books are arranged alphabetically on the shelf. (我所有的书都按字母顺序排列在书架上。)&quot;
            },
            {
                word: &quot;shower&quot;,
                phonetic: &quot;[&#x27;ʃaʊə(r)]&quot;,
                meaning: &quot;淋浴器；淋浴间&quot;,
                example: &quot;I take a quick shower every morning before work. (我每天早上上班前快速冲个澡。)&quot;
            },
            {
                word: &quot;sink&quot;,
                phonetic: &quot;[sɪŋk]&quot;,
                meaning: &quot;洗涤池，洗碗槽&quot;,
                example: &quot;The dishes are piling up in the kitchen sink. (厨房水槽里的盘子越堆越高。)&quot;
            },
            {
                word: &quot;sitting room&quot;,
                phonetic: &quot;[&#x27;sɪtɪŋ] [ruːm]&quot;,
                meaning: &quot;客厅；起居室&quot;,
                example: &quot;We have a comfortable sofa in the sitting room. (我们的客厅里有一张舒适的沙发。)&quot;
            },
            {
                word: &quot;sofa&quot;,
                phonetic: &quot;[&#x27;səʊfe]&quot;,
                meaning: &quot;沙发&quot;,
                example: &quot;The whole family can fit on our large sofa. (我们的大沙发可以坐下全家人。)&quot;
            },
            {
                word: &quot;stay (v)&quot;,
                phonetic: &quot;[steɪ]&quot;,
                meaning: &quot;暂住；逗留；停留&quot;,
                example: &quot;We&#x27;re going to stay at a hotel near the beach. (我们将住在海滩附近的一家酒店。)&quot;
            },
            {
                word: &quot;toilet&quot;,
                phonetic: &quot;[&#x27;tɔɪlət]&quot;,
                meaning: &quot;坐便器；抽水马桶；卫生间&quot;,
                example: &quot;The toilet is clogged and won&#x27;t flush properly. (马桶堵了，冲水不畅。)&quot;
            },
            {
                word: &quot;towel&quot;,
                phonetic: &quot;[&#x27;taʊəl]&quot;,
                meaning: &quot;毛巾；手巾&quot;,
                example: &quot;Don&#x27;t forget to bring a towel to the beach. (别忘了带毛巾去海滩。)&quot;
            },
            {
                word: &quot;wall&quot;,
                phonetic: &quot;[wɔːl]&quot;,
                meaning: &quot;墙壁&quot;,
                example: &quot;We&#x27;re going to paint the walls light blue. (我们要把墙壁漆成淡蓝色。)&quot;
            }
        ];

        let currentIndex = 0;
        let remainingWords = [...words];
        let knownWords = [];
        let unknownWords = [];
        let unsureWords = [];
        let isReviewMode = false;
        let reviewWords = [];
        
        const card = document.getElementById(&#x27;card&#x27;);
        const wordElement = document.getElementById(&#x27;word&#x27;);
        const phoneticElement = document.getElementById(&#x27;phonetic&#x27;);
        const meaningElement = document.getElementById(&#x27;meaning&#x27;);
        const exampleElement = document.getElementById(&#x27;example&#x27;);
        const progressText = document.getElementById(&#x27;progress-text&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);
        const completionMessage = document.getElementById(&#x27;completion-message&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewList = document.getElementById(&#x27;review-list&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);

        // Initialize
        shuffleArray(remainingWords);
        updateCard();

        // Event listeners
        document.getElementById(&#x27;known&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;known&#x27;));
        document.getElementById(&#x27;unknown&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unknown&#x27;));
        document.getElementById(&#x27;unsure&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unsure&#x27;));
        
        document.addEventListener(&#x27;keydown&#x27;, function(event) {
            if (event.key === &#x27;1&#x27;) {
                markWord(&#x27;known&#x27;);
            } else if (event.key === &#x27;2&#x27;) {
                markWord(&#x27;unknown&#x27;);
            } else if (event.key === &#x27;3&#x27;) {
                markWord(&#x27;unsure&#x27;);
            } else if (event.key === &#x27; &#x27; || event.key === &#x27;Enter&#x27;) {
                flipCard();
            }
        });

        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        function updateCard() {
            if (remainingWords.length === 0) {
                if (!isReviewMode &amp;&amp; (unknownWords.length &gt; 0 || unsureWords.length &gt; 0)) {
                    showCompletionMessage();
                } else if (isReviewMode &amp;&amp; reviewWords.length === 0) {
                    finishReview();
                } else {
                    // All words are known, no need to review
                    showCompletionMessage();
                }
                return;
            }
            
            const currentWord = remainingWords[0];
            wordElement.textContent = currentWord.word;
            phoneticElement.textContent = currentWord.phonetic;
            meaningElement.textContent = currentWord.meaning;
            exampleElement.textContent = currentWord.example;
            
            const totalWords = words.length;
            const learnedWords = totalWords - remainingWords.length + 1;
            const progressPercentage = (learnedWords / totalWords) * 100;
            
            progressText.textContent = `进度: ${learnedWords}/${totalWords}`;
            progressBar.style.width = `${progressPercentage}%`;
            
            // Reset card to front view when changing words
            if (card.classList.contains(&#x27;flipped&#x27;)) {
                card.classList.remove(&#x27;flipped&#x27;);
            }
        }

        function markWord(status) {
            if (remainingWords.length === 0) return;
            
            const currentWord = remainingWords.shift();
            
            switch (status) {
                case &#x27;known&#x27;:
                    knownWords.push(currentWord);
                    break;
                case &#x27;unknown&#x27;:
                    unknownWords.push(currentWord);
                    break;
                case &#x27;unsure&#x27;:
                    unsureWords.push(currentWord);
                    break;
            }
            
            updateCard();
        }

        function showCompletionMessage() {
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.flip-hint&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-text&#x27;).style.display = &#x27;none&#x27;;
            
            let reviewWordsList = &#x27;&#x27;;
            
            if (unknownWords.length &gt; 0) {
                reviewWordsList += &#x27;&lt;div style=&quot;margin-bottom: 20px;&quot;&gt;&#x27;;
                reviewWordsList += &#x27;&lt;h3 style=&quot;color: var(--danger-color); margin-bottom: 10px;&quot;&gt;我不认识的单词&lt;/h3&gt;&#x27;;
                reviewWordsList += &#x27;&lt;ul style=&quot;text-align: left; padding-left: 20px;&quot;&gt;&#x27;;
                unknownWords.forEach(word =&gt; {
                    reviewWordsList += `&lt;li&gt;&lt;strong&gt;${word.word}&lt;/strong&gt; - ${word.meaning}&lt;/li&gt;`;
                });
                reviewWordsList += &#x27;&lt;/ul&gt;&lt;/div&gt;&#x27;;
            }
            
            if (unsureWords.length &gt; 0) {
                reviewWordsList += &#x27;&lt;div&gt;&#x27;;
                reviewWordsList += &#x27;&lt;h3 style=&quot;color: var(--warning-color); margin-bottom: 10px;&quot;&gt;我不确定的单词&lt;/h3&gt;&#x27;;
                reviewWordsList += &#x27;&lt;ul style=&quot;text-align: left; padding-left: 20px;&quot;&gt;&#x27;;
                unsureWords.forEach(word =&gt; {
                    reviewWordsList += `&lt;li&gt;&lt;strong&gt;${word.word}&lt;/strong&gt; - ${word.meaning}&lt;/li&gt;`;
                });
                reviewWordsList += &#x27;&lt;/ul&gt;&lt;/div&gt;&#x27;;
            }
            
            if (unknownWords.length === 0 &amp;&amp; unsureWords.length === 0) {
                completionMessage.innerHTML = `
                    &lt;h2&gt;🎉 恭喜！您已掌握所有单词！&lt;/h2&gt;
                    &lt;p&gt;您已经完成了所有47个单词的学习，并且全部标记为&quot;我认识&quot;！&lt;/p&gt;
                    &lt;button onclick=&quot;location.reload()&quot; class=&quot;action-button&quot;&gt;重新开始&lt;/button&gt;
                `;
            } else {
                reviewWordsContainer.innerHTML = reviewWordsList;
            }
            
            completionMessage.style.display = &#x27;block&#x27;;
        }

        function startReview() {
            completionMessage.style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;block&#x27;;
            
            // Combine unknown and unsure words for review
            reviewWords = [...unknownWords, ...unsureWords];
            shuffleArray(reviewWords);
            unknownWords = [];
            unsureWords = [];
            isReviewMode = true;
            
            // Update remaining words for review
            remainingWords = [...reviewWords];
            reviewWords = [];
            
            // Show review list
            updateReviewList();
            
            // Show card and controls again
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.flip-hint&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-text&#x27;).style.display = &#x27;block&#x27;;
            
            // Start reviewing
            updateCard();
        }

        function updateReviewList() {
            reviewList.innerHTML = &#x27;&#x27;;
            const allReviewWords = [...unknownWords, ...unsureWords, ...remainingWords];
            
            allReviewWords.forEach(word =&gt; {
                const li = document.createElement(&#x27;li&#x27;);
                li.className = &#x27;review-item&#x27;;
                li.innerHTML = `
                    &lt;span class=&quot;review-word&quot;&gt;${word.word}&lt;/span&gt;
                    &lt;span class=&quot;review-meaning&quot;&gt;${word.meaning}&lt;/span&gt;
                `;
                reviewList.appendChild(li);
            });
        }

        function finishReview() {
            isReviewMode = false;
            reviewSection.style.display = &#x27;none&#x27;;
            
            if (unknownWords.length === 0 &amp;&amp; unsureWords.length === 0) {
                // All words are known now
                completionMessage.innerHTML = `
                    &lt;h2&gt;🎉 恭喜！您已掌握所有单词！&lt;/h2&gt;
                    &lt;p&gt;您已经完成了所有47个单词的学习，包括复习部分。&lt;/p&gt;
                    &lt;button onclick=&quot;location.reload()&quot; class=&quot;action-button&quot;&gt;重新开始&lt;/button&gt;
                `;
            } else {
                // Still some words to review
                showCompletionMessage();
            }
        }

        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="13-测量" class="section">
      <div class="section-header">
        <h2>13 测量</h2>
        <div class="section-actions">
          <button onclick="openStandalone('13 测量.html')">打开原文件</button>
          <button onclick="toggleHeight('13-测量')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;测量相关单词学习卡片&lt;/title&gt;
    &lt;style&gt;
        :root {
            --primary-color: #4361ee;
            --success-color: #4cc9f0;
            --warning-color: #f8961e;
            --danger-color: #f94144;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }
        
        body {
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            color: var(--dark-color);
        }
        
        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
        
        .card-container {
            perspective: 1000px;
            width: 100%;
            max-width: 500px;
            margin-bottom: 30px;
        }
        
        .card {
            position: relative;
            width: 100%;
            height: 300px;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-radius: 15px;
            background: white;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            padding: 30px;
            box-sizing: border-box;
            background: white;
        }
        
        .card-front {
            border: 2px solid var(--primary-color);
        }
        
        .card-back {
            border: 2px solid var(--success-color);
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            color: var(--primary-color);
        }
        
        .phonetic {
            font-size: 1.3rem;
            margin-bottom: 20px;
            font-style: italic;
            color: #6c757d;
        }
        
        .meaning {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: center;
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .example {
            font-size: 1.1rem;
            text-align: center;
            line-height: 1.6;
            padding: 15px;
            background-color: rgba(76, 201, 240, 0.1);
            border-radius: 10px;
            width: 90%;
            color: #495057;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
            width: 100%;
            max-width: 500px;
            flex-wrap: wrap;
        }
        
        button {
            border: none;
            color: white;
            padding: 12px 25px;
            text-align: center;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 50px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            min-width: 140px;
            letter-spacing: 0.5px;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        #known {
            background: linear-gradient(135deg, var(--success-color) 0%, #38a3a5 100%);
        }
        
        #unknown {
            background: linear-gradient(135deg, var(--danger-color) 0%, #d62839 100%);
        }
        
        #unsure {
            background: linear-gradient(135deg, var(--warning-color) 0%, #f3722c 100%);
        }
        
        .progress-container {
            width: 100%;
            max-width: 500px;
            background: #e9ecef;
            border-radius: 10px;
            height: 10px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color) 0%, #4895ef 100%);
            border-radius: 10px;
            transition: width 0.4s ease;
        }
        
        .progress-text {
            text-align: center;
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 5px;
        }
        
        .completion-message {
            display: none;
            background: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 500px;
            margin: 20px auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid var(--success-color);
        }
        
        .completion-message h2 {
            color: var(--success-color);
            margin-bottom: 20px;
        }
        
        .review-section {
            display: none;
            width: 100%;
            max-width: 500px;
            margin-top: 30px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 2px solid var(--warning-color);
        }
        
        .review-title {
            color: var(--warning-color);
            text-align: center;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .review-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .review-item {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.2s;
        }
        
        .review-item:hover {
            background: #f8f9fa;
        }
        
        .review-word {
            font-weight: bold;
            color: var(--dark-color);
        }
        
        .review-meaning {
            color: #6c757d;
        }
        
        .action-button {
            display: block;
            margin: 25px auto 0;
            background: var(--primary-color);
            width: 200px;
        }
        
        .flip-hint {
            text-align: center;
            color: #6c757d;
            font-size: 0.9rem;
            margin-top: 15px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        @media (max-width: 576px) {
            .card {
                height: 280px;
            }
            
            .word {
                font-size: 2rem;
            }
            
            .meaning {
                font-size: 1.3rem;
            }
            
            button {
                min-width: 120px;
                padding: 10px 20px;
            }
            
            .controls {
                gap: 10px;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;测量相关单词学习卡片&lt;/h1&gt;
    
    &lt;div class=&quot;progress-text&quot; id=&quot;progress-text&quot;&gt;进度: 1/15&lt;/div&gt;
    &lt;div class=&quot;progress-container&quot;&gt;
        &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot; style=&quot;width: 6.67%&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;card-container&quot;&gt;
        &lt;div class=&quot;card&quot; id=&quot;card&quot; onclick=&quot;flipCard()&quot;&gt;
            &lt;div class=&quot;card-face card-front&quot;&gt;
                &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;Word&lt;/div&gt;
                &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;Phonetic&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-face card-back&quot;&gt;
                &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;Meaning&lt;/div&gt;
                &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;Example sentence will appear here&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
    
    &lt;div class=&quot;controls&quot;&gt;
        &lt;button id=&quot;known&quot;&gt;我认识&lt;/button&gt;
        &lt;button id=&quot;unsure&quot;&gt;我不确定&lt;/button&gt;
        &lt;button id=&quot;unknown&quot;&gt;我不认识&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;completion-message&quot; id=&quot;completion-message&quot;&gt;
        &lt;h2&gt;🎉 恭喜！您已完成所有单词的学习！&lt;/h2&gt;
        &lt;p&gt;以下是您需要复习的单词：&lt;/p&gt;
        &lt;div id=&quot;review-words&quot;&gt;&lt;/div&gt;
        &lt;button onclick=&quot;startReview()&quot; class=&quot;action-button&quot;&gt;开始复习&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
        &lt;h3 class=&quot;review-title&quot;&gt;📚 复习单词列表&lt;/h3&gt;
        &lt;ul class=&quot;review-list&quot; id=&quot;review-list&quot;&gt;&lt;/ul&gt;
        &lt;button onclick=&quot;finishReview()&quot; class=&quot;action-button&quot;&gt;完成复习&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        const words = [
            {
                word: &quot;centimetre/centimeter/cm&quot;,
                phonetic: &quot;[ˈsentɪmiːtə(r)]&quot;,
                meaning: &quot;厘米&quot;,
                example: &quot;This ruler is 30 centimetres long. (这把尺子有30厘米长。)&quot;
            },
            {
                word: &quot;day&quot;,
                phonetic: &quot;[deɪ]&quot;,
                meaning: &quot;天，日&quot;,
                example: &quot;There are seven days in a week. (一周有七天。)&quot;
            },
            {
                word: &quot;degree&quot;,
                phonetic: &quot;[dɪˈɡriː]&quot;,
                meaning: &quot;度；程度；学位&quot;,
                example: &quot;The temperature today is 25 degrees Celsius. (今天气温是25摄氏度。)&quot;
            },
            {
                word: &quot;gram(me)&quot;,
                phonetic: &quot;[ɡræm]&quot;,
                meaning: &quot;克&quot;,
                example: &quot;This package weighs 500 grams. (这个包裹重500克。)&quot;
            },
            {
                word: &quot;half&quot;,
                phonetic: &quot;[hɑːf]&quot;,
                meaning: &quot;一半&quot;,
                example: &quot;I&#x27;ll be back in half an hour. (我半小时后回来。)&quot;
            },
            {
                word: &quot;hour&quot;,
                phonetic: &quot;[ˈaʊə(r)]&quot;,
                meaning: &quot;小时&quot;,
                example: &quot;The movie lasts two and a half hours. (这部电影时长两个半小时。)&quot;
            },
            {
                word: &quot;kilo(gram[me]) / kg&quot;,
                phonetic: &quot;[ˈkiːləʊ]([ɡræm])&quot;,
                meaning: &quot;千克，公斤&quot;,
                example: &quot;I bought three kilograms of apples. (我买了三公斤苹果。)&quot;
            },
            {
                word: &quot;kilometre/km/kilometer&quot;,
                phonetic: &quot;[ˈkɪləmiːtə(r)]&quot;,
                meaning: &quot;千米，公里&quot;,
                example: &quot;The school is about two kilometres from my home. (学校离我家大约两公里。)&quot;
            },
            {
                word: &quot;litre / liter&quot;,
                phonetic: &quot;[ˈliːtə(r)]&quot;,
                meaning: &quot;升&quot;,
                example: &quot;This bottle contains 1.5 litres of water. (这个瓶子装有1.5升水。)&quot;
            },
            {
                word: &quot;metre / meter&quot;,
                phonetic: &quot;[ˈmiːtə(r)]&quot;,
                meaning: &quot;米&quot;,
                example: &quot;The room is five metres long and four metres wide. (这个房间长五米，宽四米。)&quot;
            },
            {
                word: &quot;minute&quot;,
                phonetic: &quot;[ˈmɪnɪt]&quot;,
                meaning: &quot;分钟&quot;,
                example: &quot;Wait a minute, I&#x27;ll be right back. (等一下，我马上回来。)&quot;
            },
            {
                word: &quot;moment&quot;,
                phonetic: &quot;[ˈməʊmənt]&quot;,
                meaning: &quot;片刻，瞬间&quot;,
                example: &quot;I&#x27;ll be with you in a moment. (我马上就来。)&quot;
            },
            {
                word: &quot;quarter&quot;,
                phonetic: &quot;[ˈkwɔːtə(r)]&quot;,
                meaning: &quot;四分之一；一刻钟&quot;,
                example: &quot;It&#x27;s a quarter past three. (现在是三点一刻。)&quot;
            },
            {
                word: &quot;second&quot;,
                phonetic: &quot;[ˈsekənd]&quot;,
                meaning: &quot;秒；第二&quot;,
                example: &quot;There are 60 seconds in a minute. (一分钟有60秒。)&quot;
            },
            {
                word: &quot;temperature&quot;,
                phonetic: &quot;[ˈtemprətʃə(r)]&quot;,
                meaning: &quot;温度&quot;,
                example: &quot;The normal body temperature is about 37 degrees Celsius. (正常体温约为37摄氏度。)&quot;
            },
            {
                word: &quot;week&quot;,
                phonetic: &quot;[wiːk]&quot;,
                meaning: &quot;周，星期&quot;,
                example: &quot;I go to the gym three times a week. (我每周去健身房三次。)&quot;
            },
            {
                word: &quot;year&quot;,
                phonetic: &quot;[jɪə(r)]&quot;,
                meaning: &quot;年&quot;,
                example: &quot;We&#x27;ve lived here for five years. (我们在这里住了五年了。)&quot;
            }
        ];

        let currentIndex = 0;
        let remainingWords = [...words];
        let knownWords = [];
        let unknownWords = [];
        let unsureWords = [];
        let isReviewMode = false;
        let reviewWords = [];
        
        const card = document.getElementById(&#x27;card&#x27;);
        const wordElement = document.getElementById(&#x27;word&#x27;);
        const phoneticElement = document.getElementById(&#x27;phonetic&#x27;);
        const meaningElement = document.getElementById(&#x27;meaning&#x27;);
        const exampleElement = document.getElementById(&#x27;example&#x27;);
        const progressText = document.getElementById(&#x27;progress-text&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);
        const completionMessage = document.getElementById(&#x27;completion-message&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewList = document.getElementById(&#x27;review-list&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);

        // Initialize
        shuffleArray(remainingWords);
        updateCard();

        // Event listeners
        document.getElementById(&#x27;known&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;known&#x27;));
        document.getElementById(&#x27;unknown&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unknown&#x27;));
        document.getElementById(&#x27;unsure&#x27;).addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unsure&#x27;));
        
        document.addEventListener(&#x27;keydown&#x27;, function(event) {
            if (event.key === &#x27;1&#x27;) {
                markWord(&#x27;known&#x27;);
            } else if (event.key === &#x27;2&#x27;) {
                markWord(&#x27;unknown&#x27;);
            } else if (event.key === &#x27;3&#x27;) {
                markWord(&#x27;unsure&#x27;);
            } else if (event.key === &#x27; &#x27; || event.key === &#x27;Enter&#x27;) {
                flipCard();
            }
        });

        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        function updateCard() {
            if (remainingWords.length === 0) {
                if (!isReviewMode &amp;&amp; (unknownWords.length &gt; 0 || unsureWords.length &gt; 0)) {
                    showCompletionMessage();
                } else if (isReviewMode &amp;&amp; reviewWords.length === 0) {
                    finishReview();
                } else {
                    // All words are known, no need to review
                    showCompletionMessage();
                }
                return;
            }
            
            const currentWord = remainingWords[0];
            wordElement.textContent = currentWord.word;
            phoneticElement.textContent = currentWord.phonetic;
            meaningElement.textContent = currentWord.meaning;
            exampleElement.textContent = currentWord.example;
            
            const totalWords = words.length;
            const learnedWords = totalWords - remainingWords.length + 1;
            const progressPercentage = (learnedWords / totalWords) * 100;
            
            progressText.textContent = `进度: ${learnedWords}/${totalWords}`;
            progressBar.style.width = `${progressPercentage}%`;
            
            // Reset card to front view when changing words
            if (card.classList.contains(&#x27;flipped&#x27;)) {
                card.classList.remove(&#x27;flipped&#x27;);
            }
        }

        function markWord(status) {
            if (remainingWords.length === 0) return;
            
            const currentWord = remainingWords.shift();
            
            switch (status) {
                case &#x27;known&#x27;:
                    knownWords.push(currentWord);
                    break;
                case &#x27;unknown&#x27;:
                    unknownWords.push(currentWord);
                    break;
                case &#x27;unsure&#x27;:
                    unsureWords.push(currentWord);
                    break;
            }
            
            updateCard();
        }

        function showCompletionMessage() {
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.flip-hint&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-text&#x27;).style.display = &#x27;none&#x27;;
            
            let reviewWordsList = &#x27;&#x27;;
            
            if (unknownWords.length &gt; 0) {
                reviewWordsList += &#x27;&lt;div style=&quot;margin-bottom: 20px;&quot;&gt;&#x27;;
                reviewWordsList += &#x27;&lt;h3 style=&quot;color: var(--danger-color); margin-bottom: 10px;&quot;&gt;我不认识的单词&lt;/h3&gt;&#x27;;
                reviewWordsList += &#x27;&lt;ul style=&quot;text-align: left; padding-left: 20px;&quot;&gt;&#x27;;
                unknownWords.forEach(word =&gt; {
                    reviewWordsList += `&lt;li&gt;&lt;strong&gt;${word.word}&lt;/strong&gt; - ${word.meaning}&lt;/li&gt;`;
                });
                reviewWordsList += &#x27;&lt;/ul&gt;&lt;/div&gt;&#x27;;
            }
            
            if (unsureWords.length &gt; 0) {
                reviewWordsList += &#x27;&lt;div&gt;&#x27;;
                reviewWordsList += &#x27;&lt;h3 style=&quot;color: var(--warning-color); margin-bottom: 10px;&quot;&gt;我不确定的单词&lt;/h3&gt;&#x27;;
                reviewWordsList += &#x27;&lt;ul style=&quot;text-align: left; padding-left: 20px;&quot;&gt;&#x27;;
                unsureWords.forEach(word =&gt; {
                    reviewWordsList += `&lt;li&gt;&lt;strong&gt;${word.word}&lt;/strong&gt; - ${word.meaning}&lt;/li&gt;`;
                });
                reviewWordsList += &#x27;&lt;/ul&gt;&lt;/div&gt;&#x27;;
            }
            
            if (unknownWords.length === 0 &amp;&amp; unsureWords.length === 0) {
                completionMessage.innerHTML = `
                    &lt;h2&gt;🎉 恭喜！您已掌握所有单词！&lt;/h2&gt;
                    &lt;p&gt;您已经完成了所有15个单词的学习，并且全部标记为&quot;我认识&quot;！&lt;/p&gt;
                    &lt;button onclick=&quot;location.reload()&quot; class=&quot;action-button&quot;&gt;重新开始&lt;/button&gt;
                `;
            } else {
                reviewWordsContainer.innerHTML = reviewWordsList;
            }
            
            completionMessage.style.display = &#x27;block&#x27;;
        }

        function startReview() {
            completionMessage.style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;block&#x27;;
            
            // Combine unknown and unsure words for review
            reviewWords = [...unknownWords, ...unsureWords];
            shuffleArray(reviewWords);
            unknownWords = [];
            unsureWords = [];
            isReviewMode = true;
            
            // Update remaining words for review
            remainingWords = [...reviewWords];
            reviewWords = [];
            
            // Show review list
            updateReviewList();
            
            // Show card and controls again
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.flip-hint&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-text&#x27;).style.display = &#x27;block&#x27;;
            
            // Start reviewing
            updateCard();
        }

        function updateReviewList() {
            reviewList.innerHTML = &#x27;&#x27;;
            const allReviewWords = [...unknownWords, ...unsureWords, ...remainingWords];
            
            allReviewWords.forEach(word =&gt; {
                const li = document.createElement(&#x27;li&#x27;);
                li.className = &#x27;review-item&#x27;;
                li.innerHTML = `
                    &lt;span class=&quot;review-word&quot;&gt;${word.word}&lt;/span&gt;
                    &lt;span class=&quot;review-meaning&quot;&gt;${word.meaning}&lt;/span&gt;
                `;
                reviewList.appendChild(li);
            });
        }

        function finishReview() {
            isReviewMode = false;
            reviewSection.style.display = &#x27;none&#x27;;
            
            if (unknownWords.length === 0 &amp;&amp; unsureWords.length === 0) {
                // All words are known now
                completionMessage.innerHTML = `
                    &lt;h2&gt;🎉 恭喜！您已掌握所有单词！&lt;/h2&gt;
                    &lt;p&gt;您已经完成了所有15个单词的学习，包括复习部分。&lt;/p&gt;
                    &lt;button onclick=&quot;location.reload()&quot; class=&quot;action-button&quot;&gt;重新开始&lt;/button&gt;
                `;
            } else {
                // Still some words to review
                showCompletionMessage();
            }
        }

        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="14-情感-观点和体验-1" class="section">
      <div class="section-header">
        <h2>14 情感、观点和体验 1</h2>
        <div class="section-actions">
          <button onclick="openStandalone('14 情感、观点和体验 1.html')">打开原文件</button>
          <button onclick="toggleHeight('14-情感-观点和体验-1')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;英语单词学习卡片 - P108&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: &quot;&quot;;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(&#x27;data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100&quot; height=&quot;100&quot; viewBox=&quot;0 0 100 100&quot;&gt;&lt;text x=&quot;10&quot; y=&quot;30&quot; font-size=&quot;14&quot; fill=&quot;rgba(255,255,255,0.05)&quot; transform=&quot;rotate(-30)&quot;&gt;English&lt;/text&gt;&lt;text x=&quot;40&quot; y=&quot;70&quot; font-size=&quot;14&quot; fill=&quot;rgba(255,255,255,0.05)&quot; transform=&quot;rotate(15)&quot;&gt;Vocabulary&lt;/text&gt;&lt;/svg&gt;&#x27;);
            z-index: -1;
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            padding: 30px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 2.5rem;
            margin-bottom: 5px;
            background: linear-gradient(90deg, #1a2a6c, #b21f1f, #1a2a6c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            letter-spacing: 1px;
        }
        
        .header p {
            color: #6c757d;
            font-size: 1.2rem;
            font-weight: 500;
            background: linear-gradient(90deg, #1a2a6c, #b21f1f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .progress-container {
            background: #e9ecef;
            border-radius: 10px;
            height: 20px;
            margin: 20px 0 30px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #1a2a6c, #b21f1f, #1a2a6c);
            width: 0%;
            transition: width 0.5s ease;
            position: relative;
        }
        
        .card-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 40px 0;
            perspective: 1000px;
            height: 350px;
        }
        
        .card {
            width: 320px;
            height: 400px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .card-front {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: 1px solid #e0e0e0;
            text-align: center;
        }
        
        .card-back {
            background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 100%);
            color: white;
            transform: rotateY(180deg);
            text-align: center;
        }
        
        .word {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #1a2a6c;
        }
        
        .phonetic {
            font-size: 1.5rem;
            color: #6c757d;
            margin-bottom: 30px;
            font-family: &#x27;Courier New&#x27;, monospace;
        }
        
        .translation {
            font-size: 1.8rem;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .example {
            font-size: 1.2rem;
            font-style: italic;
            line-height: 1.6;
            background: rgba(255, 255, 255, 0.15);
            padding: 15px;
            border-radius: 10px;
            max-width: 100%;
        }
        
        .speak-btn {
            background: #1a2a6c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.5rem;
            box-shadow: 0 5px 15px rgba(26, 42, 108, 0.4);
            transition: all 0.3s ease;
        }
        
        .speak-btn:hover {
            background: #0d1a4a;
            transform: scale(1.05);
        }
        
        .hint {
            margin-top: 20px;
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
        }
        
        .control-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .control-btn.know {
            background: linear-gradient(135deg, #2ecc71, #1abc9c);
            color: white;
        }
        
        .control-btn.unsure {
            background: linear-gradient(135deg, #f39c12, #e67e22);
            color: white;
        }
        
        .control-btn.unknown {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
        }
        
        .control-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 15px;
            font-weight: 500;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .stat-box {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
        }
        
        .stat-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .complete-message {
            text-align: center;
            padding: 40px;
            display: none;
        }
        
        .complete-message h2 {
            font-size: 2.5rem;
            color: #2ecc71;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #1a2a6c, #b21f1f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .restart-btn {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
            box-shadow: 0 5px 15px rgba(26, 42, 108, 0.4);
        }
        
        .restart-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(26, 42, 108, 0.6);
        }
        
        .review-list {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin-top: 30px;
            max-height: 400px;
            overflow-y: auto;
            display: none;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
        }
        
        .review-header {
            text-align: center;
            margin-bottom: 20px;
            color: #1a2a6c;
            font-size: 1.5rem;
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 2px solid #e0e0e0;
        }
        
        .review-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
            transition: background 0.2s;
        }
        
        .review-item:hover {
            background: #e9ecef;
            border-radius: 10px;
        }
        
        .review-word {
            font-weight: 700;
            font-size: 1.4rem;
            color: #1a2a6c;
            width: 120px;
        }
        
        .review-phonetic {
            font-family: &#x27;Courier New&#x27;, monospace;
            color: #6c757d;
            width: 180px;
        }
        
        .review-translation {
            flex: 1;
            color: #495057;
        }
        
        .review-example {
            flex: 2;
            font-style: italic;
            color: #6c757d;
            font-size: 0.95rem;
        }
        
        .review-btn {
            background: #1a2a6c;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .review-btn:hover {
            background: #0d1a4a;
            transform: translateY(-2px);
        }
        
        .no-review {
            text-align: center;
            padding: 20px;
            color: #6c757d;
            font-style: italic;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px 15px;
            }
            
            .card {
                width: 280px;
                height: 350px;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
            }
            
            .control-btn {
                width: 100%;
                max-width: 300px;
            }
            
            .review-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            
            .review-word, .review-phonetic, .review-translation, .review-example {
                width: 100%;
            }
            
            .review-btn {
                align-self: flex-end;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;header&quot;&gt;
            &lt;h1&gt;英语单词学习卡片&lt;/h1&gt;
            &lt;p&gt;个人感受、观点和经历 1 (P108)&lt;/p&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;flashCard&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;able&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;[ˈeɪbl]&lt;/div&gt;
                    &lt;button class=&quot;speak-btn&quot; id=&quot;speakBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片查看释义和例句&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;translation&quot; id=&quot;translation&quot;&gt;能够；有才智的；有才能的&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;例句：He is able to solve complex problems quickly.&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;control-btn know&quot; id=&quot;knowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;control-btn unsure&quot; id=&quot;unsureBtn&quot;&gt;
                &lt;i class=&quot;fas fa-meh&quot;&gt;&lt;/i&gt; 我不确定
            &lt;/button&gt;
            &lt;button class=&quot;control-btn unknown&quot; id=&quot;unknownBtn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 我不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;div class=&quot;stat-value&quot; id=&quot;knownCount&quot;&gt;0&lt;/div&gt;
                &lt;div class=&quot;stat-label&quot;&gt;已掌握&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;div class=&quot;stat-value&quot; id=&quot;unsureCount&quot;&gt;0&lt;/div&gt;
                &lt;div class=&quot;stat-label&quot;&gt;不确定&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;div class=&quot;stat-value&quot; id=&quot;unknownCount&quot;&gt;0&lt;/div&gt;
                &lt;div class=&quot;stat-label&quot;&gt;未掌握&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;div class=&quot;stat-value&quot; id=&quot;remainingCount&quot;&gt;27&lt;/div&gt;
                &lt;div class=&quot;stat-label&quot;&gt;剩余单词&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-list&quot; id=&quot;reviewList&quot;&gt;
            &lt;div class=&quot;review-header&quot;&gt;需要复习的单词&lt;/div&gt;
            &lt;div id=&quot;reviewItems&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;complete-message&quot; id=&quot;completeMessage&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜你！&lt;/h2&gt;
            &lt;p&gt;你已经掌握了所有27个单词！太棒了！&lt;/p&gt;
            &lt;button class=&quot;restart-btn&quot; id=&quot;restartBtn&quot;&gt;
                &lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 重新开始
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 单词数据
        const words = [
            { word: &quot;able&quot;, phonetic: &quot;[ˈeɪbl]&quot;, translation: &quot;能够；有才智的；有才能的&quot;, example: &quot;He is able to speak three languages fluently.&quot; },
            { word: &quot;afraid&quot;, phonetic: &quot;[əˈfreɪd]&quot;, translation: &quot;害怕的；畏惧的&quot;, example: &quot;She is afraid of heights.&quot; },
            { word: &quot;alone&quot;, phonetic: &quot;[əˈləʊn]&quot;, translation: &quot;孤独的；寂寞的&quot;, example: &quot;He lives alone in a small apartment.&quot; },
            { word: &quot;amazing&quot;, phonetic: &quot;[əˈmeɪzɪŋ]&quot;, translation: &quot;令人大为惊奇的&quot;, example: &quot;The view from the top was absolutely amazing.&quot; },
            { word: &quot;angry&quot;, phonetic: &quot;[ˈæŋɡri]&quot;, translation: &quot;愤怒的；生气的&quot;, example: &quot;My boss was angry because I was late for the meeting.&quot; },
            { word: &quot;bad&quot;, phonetic: &quot;[bæd]&quot;, translation: &quot;令人不快的；坏的&quot;, example: &quot;The weather was so bad that we had to cancel the picnic.&quot; },
            { word: &quot;beautiful&quot;, phonetic: &quot;[ˈbjuːtɪfl]&quot;, translation: &quot;美丽的；美好的&quot;, example: &quot;She wore a beautiful dress to the party.&quot; },
            { word: &quot;better&quot;, phonetic: &quot;[ˈbetə(r)]&quot;, translation: &quot;较好的；更好的&quot;, example: &quot;Your writing has gotten much better since last year.&quot; },
            { word: &quot;big&quot;, phonetic: &quot;[bɪɡ]&quot;, translation: &quot;大的；巨大的&quot;, example: &quot;They live in a big house with a swimming pool.&quot; },
            { word: &quot;bored&quot;, phonetic: &quot;[bɔːd]&quot;, translation: &quot;厌倦的；烦闷的&quot;, example: &quot;The children were bored during the long car ride.&quot; },
            { word: &quot;boring&quot;, phonetic: &quot;[ˈbɔːrɪŋ]&quot;, translation: &quot;令人厌倦（或厌烦）的&quot;, example: &quot;The lecture was so boring that many students fell asleep.&quot; },
            { word: &quot;brave&quot;, phonetic: &quot;[breɪv]&quot;, translation: &quot;勇敢的；无畏的&quot;, example: &quot;The firefighter was brave to enter the burning building.&quot; },
            { word: &quot;brilliant&quot;, phonetic: &quot;[ˈbrɪliənt]&quot;, translation: &quot;巧妙的；杰出的&quot;, example: &quot;She came up with a brilliant solution to the problem.&quot; },
            { word: &quot;busy&quot;, phonetic: &quot;[ˈbɪzi]&quot;, translation: &quot;忙碌的&quot;, example: &quot;I&#x27;m too busy to go out this weekend.&quot; },
            { word: &quot;careful&quot;, phonetic: &quot;[ˈkeəfl]&quot;, translation: &quot;小心的；细致的&quot;, example: &quot;Be careful when you cross the street.&quot; },
            { word: &quot;clear&quot;, phonetic: &quot;[klɪə(r)]&quot;, translation: &quot;明白清楚的；显然的&quot;, example: &quot;The instructions were clear and easy to follow.&quot; },
            { word: &quot;clever&quot;, phonetic: &quot;[ˈklevə(r)]&quot;, translation: &quot;聪明的；聪颖的&quot;, example: &quot;The clever student solved the puzzle in minutes.&quot; },
            { word: &quot;cool&quot;, phonetic: &quot;[kuːl]&quot;, translation: &quot;凉爽的；妙极的，酷的&quot;, example: &quot;That&#x27;s a really cool bike you have!&quot; },
            { word: &quot;different&quot;, phonetic: &quot;[ˈdɪfrənt]&quot;, translation: &quot;不同的&quot;, example: &quot;People from different cultures have different customs.&quot; },
            { word: &quot;difficult&quot;, phonetic: &quot;[ˈdɪfɪkəlt]&quot;, translation: &quot;困难的&quot;, example: &quot;The exam was more difficult than I expected.&quot; },
            { word: &quot;excellent&quot;, phonetic: &quot;[ˈeksələnt]&quot;, translation: &quot;优秀的；杰出的&quot;, example: &quot;The restaurant has excellent reviews online.&quot; },
            { word: &quot;famous&quot;, phonetic: &quot;[ˈfeɪməs]&quot;, translation: &quot;著名的；出名的&quot;, example: &quot;Paris is famous for its art and culture.&quot; },
            { word: &quot;fast&quot;, phonetic: &quot;[fɑːst]&quot;, translation: &quot;快的；迅速的&quot;, example: &quot;The cheetah is the fastest land animal.&quot; },
            { word: &quot;favourite&quot;, phonetic: &quot;[ˈfeɪvərɪt]&quot;, translation: &quot;特别受喜爱的&quot;, example: &quot;Pizza is my favourite food.&quot; },
            { word: &quot;fine&quot;, phonetic: &quot;[faɪn]&quot;, translation: &quot;精巧的；精美的&quot;, example: &quot;She wore a necklace made of fine gold.&quot; },
            { word: &quot;free&quot;, phonetic: &quot;[friː]&quot;, translation: &quot;自由的；随心所欲的&quot;, example: &quot;You are free to leave whenever you wish.&quot; },
            { word: &quot;friendly&quot;, phonetic: &quot;[ˈfrendli]&quot;, translation: &quot;亲切的；友好的&quot;, example: &quot;The local people were very friendly to tourists.&quot; },
            { word: &quot;funny&quot;, phonetic: &quot;[ˈfʌni]&quot;, translation: &quot;滑稽的；好笑的&quot;, example: &quot;The comedian told many funny stories.&quot; }
        ];

        // DOM元素
        const flashCard = document.getElementById(&#x27;flashCard&#x27;);
        const wordElement = document.getElementById(&#x27;word&#x27;);
        const phoneticElement = document.getElementById(&#x27;phonetic&#x27;);
        const translationElement = document.getElementById(&#x27;translation&#x27;);
        const exampleElement = document.getElementById(&#x27;example&#x27;);
        const speakBtn = document.getElementById(&#x27;speakBtn&#x27;);
        const knowBtn = document.getElementById(&#x27;knowBtn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsureBtn&#x27;);
        const unknownBtn = document.getElementById(&#x27;unknownBtn&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const knownCountElement = document.getElementById(&#x27;knownCount&#x27;);
        const unsureCountElement = document.getElementById(&#x27;unsureCount&#x27;);
        const unknownCountElement = document.getElementById(&#x27;unknownCount&#x27;);
        const remainingCountElement = document.getElementById(&#x27;remainingCount&#x27;);
        const completeMessage = document.getElementById(&#x27;completeMessage&#x27;);
        const restartBtn = document.getElementById(&#x27;restartBtn&#x27;);
        const reviewList = document.getElementById(&#x27;reviewList&#x27;);
        const reviewItems = document.getElementById(&#x27;reviewItems&#x27;);

        // 状态管理
        let currentWordIndex = 0;
        let knownWords = [];
        let unsureWords = [];
        let unknownWords = [];
        let remainingWords = [...words];
        
        // 初始化
        function init() {
            shuffleArray(remainingWords);
            updateStats();
            showNextWord();
            
            // 卡片翻转
            flashCard.addEventListener(&#x27;click&#x27;, () =&gt; {
                flashCard.classList.toggle(&#x27;flipped&#x27;);
            });
            
            // 按钮事件
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unsure&#x27;));
            unknownBtn.addEventListener(&#x27;click&#x27;, () =&gt; markWord(&#x27;unknown&#x27;));
            speakBtn.addEventListener(&#x27;click&#x27;, speakWord);
            restartBtn.addEventListener(&#x27;click&#x27;, resetApp);
        }
        
        // 打乱数组
        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
        
        // 显示下一个单词
        function showNextWord() {
            if (remainingWords.length === 0) {
                if (unsureWords.length === 0 &amp;&amp; unknownWords.length === 0) {
                    showCompletion();
                } else {
                    showReviewList();
                }
                return;
            }
            
            // 随机选择一个单词
            currentWordIndex = Math.floor(Math.random() * remainingWords.length);
            const word = remainingWords[currentWordIndex];
            
            // 更新卡片内容
            wordElement.textContent = word.word;
            phoneticElement.textContent = word.phonetic;
            translationElement.textContent = word.translation;
            exampleElement.textContent = word.example;
            
            // 确保卡片正面朝上
            flashCard.classList.remove(&#x27;flipped&#x27;);
            
            // 更新进度条
            const progress = ((words.length - remainingWords.length) / words.length) * 100;
            progressBar.style.width = `${progress}%`;
        }
        
        // 标记单词状态
        function markWord(status) {
            const word = remainingWords[currentWordIndex];
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            
            // 根据状态添加到相应列表
            switch (status) {
                case &#x27;known&#x27;:
                    knownWords.push(word);
                    break;
                case &#x27;unsure&#x27;:
                    unsureWords.push(word);
                    break;
                case &#x27;unknown&#x27;:
                    unknownWords.push(word);
                    break;
            }
            
            // 更新统计
            updateStats();
            
            // 显示下一个单词
            showNextWord();
        }
        
        // 显示复习清单
        function showReviewList() {
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.stats&#x27;).style.display = &#x27;none&#x27;;
            
            reviewList.style.display = &#x27;block&#x27;;
            
            // 生成复习列表
            reviewItems.innerHTML = &#x27;&#x27;;
            
            const reviewWords = [...unsureWords, ...unknownWords];
            
            if (reviewWords.length === 0) {
                reviewItems.innerHTML = &#x27;&lt;div class=&quot;no-review&quot;&gt;没有需要复习的单词！&lt;/div&gt;&#x27;;
                return;
            }
            
            reviewWords.forEach(word =&gt; {
                const item = document.createElement(&#x27;div&#x27;);
                item.className = &#x27;review-item&#x27;;
                item.innerHTML = `
                    &lt;div class=&quot;review-word&quot;&gt;${word.word}&lt;/div&gt;
                    &lt;div class=&quot;review-phonetic&quot;&gt;${word.phonetic}&lt;/div&gt;
                    &lt;div class=&quot;review-translation&quot;&gt;${word.translation}&lt;/div&gt;
                    &lt;div class=&quot;review-example&quot;&gt;${word.example}&lt;/div&gt;
                    &lt;button class=&quot;review-btn&quot; data-word=&quot;${word.word}&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                `;
                reviewItems.appendChild(item);
            });
            
            // 添加发音按钮事件
            document.querySelectorAll(&#x27;.review-btn&#x27;).forEach(btn =&gt; {
                btn.addEventListener(&#x27;click&#x27;, function() {
                    const word = this.getAttribute(&#x27;data-word&#x27;);
                    const utterance = new SpeechSynthesisUtterance(word);
                    utterance.lang = &#x27;en-GB&#x27;;
                    utterance.rate = 0.9;
                    speechSynthesis.speak(utterance);
                });
            });
        }
        
        // 显示完成消息
        function showCompletion() {
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.stats&#x27;).style.display = &#x27;none&#x27;;
            reviewList.style.display = &#x27;none&#x27;;
            completeMessage.style.display = &#x27;block&#x27;;
        }
        
        // 更新统计数据
        function updateStats() {
            knownCountElement.textContent = knownWords.length;
            unsureCountElement.textContent = unsureWords.length;
            unknownCountElement.textContent = unknownWords.length;
            remainingCountElement.textContent = remainingWords.length;
        }
        
        // 发音功能
        function speakWord() {
            const word = wordElement.textContent;
            const utterance = new SpeechSynthesisUtterance(word);
            
            // 设置英式发音
            utterance.lang = &#x27;en-GB&#x27;;
            utterance.rate = 0.9;
            
            speechSynthesis.speak(utterance);
        }
        
        // 重置应用
        function resetApp() {
            knownWords = [];
            unsureWords = [];
            unknownWords = [];
            remainingWords = [...words];
            
            shuffleArray(remainingWords);
            updateStats();
            
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.stats&#x27;).style.display = &#x27;flex&#x27;;
            reviewList.style.display = &#x27;none&#x27;;
            completeMessage.style.display = &#x27;none&#x27;;
            
            showNextWord();
        }
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="15-地点-建筑-" class="section">
      <div class="section-header">
        <h2>15 地点（建筑）</h2>
        <div class="section-actions">
          <button onclick="openStandalone('15 地点（建筑） .html')">打开原文件</button>
          <button onclick="toggleHeight('15-地点-建筑-')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;单词学习闪卡系统 - 个人感受、观点和经历 1 (108)&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            padding: 30px;
            position: relative;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        
        h1 {
            font-size: 2.8rem;
            background: linear-gradient(90deg, #1a2a6c, #b21f1f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
            font-weight: 800;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .subtitle {
            font-size: 1.3rem;
            color: #555;
            margin-bottom: 25px;
        }
        
        .progress-container {
            background: #e0e0e0;
            border-radius: 10px;
            height: 16px;
            margin: 20px 0;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #00c9ff, #92fe9d);
            border-radius: 10px;
            transition: width 0.4s ease;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 1.2rem;
            color: #555;
            background: #f8f9fa;
            padding: 15px 25px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #1a2a6c;
        }
        
        .card-container {
            perspective: 1500px;
            height: 400px;
            margin: 20px 0 40px;
            position: relative;
        }
        
        .card {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
        }
        
        .card-front {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: 2px solid #e9ecef;
        }
        
        .card-back {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: #2c3e50;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .phonetic {
            font-size: 2rem;
            color: #6c757d;
            margin-bottom: 25px;
            font-family: monospace;
        }
        
        .meaning {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .example {
            font-size: 1.5rem;
            font-style: italic;
            line-height: 1.6;
            max-width: 90%;
            background: rgba(255, 255, 255, 0.15);
            padding: 20px 30px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .pronounce-btn {
            background: #1a2a6c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            font-size: 2rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 15px rgba(26, 42, 108, 0.4);
            transition: all 0.3s ease;
            margin-top: 20px;
        }
        
        .pronounce-btn:hover {
            background: #0d1a4a;
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(26, 42, 108, 0.5);
        }
        
        .hint {
            position: absolute;
            bottom: 20px;
            color: #6c757d;
            font-size: 1.1rem;
            text-align: center;
            width: 100%;
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 10px;
        }
        
        .control-btn {
            flex: 1;
            padding: 18px;
            font-size: 1.4rem;
            font-weight: 600;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
        }
        
        .control-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 18px rgba(0,0,0,0.2);
        }
        
        .control-btn:active {
            transform: translateY(2px);
        }
        
        .know {
            background: linear-gradient(135deg, #00b09b, #96c93d);
            color: white;
        }
        
        .dont-know {
            background: linear-gradient(135deg, #ff416c, #ff4b2b);
            color: white;
        }
        
        .unsure {
            background: linear-gradient(135deg, #ff8a00, #ffaa00);
            color: white;
        }
        
        .completed {
            text-align: center;
            padding: 50px 20px;
            display: none;
        }
        
        .completed h2 {
            font-size: 3rem;
            color: #00b09b;
            margin-bottom: 25px;
        }
        
        .completed p {
            font-size: 1.5rem;
            color: #555;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .review-section {
            display: none;
            margin-top: 30px;
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .review-title {
            text-align: center;
            font-size: 2rem;
            color: #1a2a6c;
            margin-bottom: 20px;
        }
        
        .review-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            max-height: 300px;
            overflow-y: auto;
            padding: 10px;
        }
        
        .review-word {
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
            text-align: center;
            font-size: 1.2rem;
            font-weight: 600;
            color: #2c3e50;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .review-word:hover {
            background: #e9ecef;
            transform: translateY(-3px);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        
        .review-btn {
            padding: 15px 40px;
            font-size: 1.3rem;
            font-weight: 600;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        .review-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 18px rgba(0,0,0,0.2);
        }
        
        .start-review {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f);
            color: white;
        }
        
        .finish-review {
            background: linear-gradient(135deg, #00b09b, #96c93d);
            color: white;
        }
        
        .counter {
            display: flex;
            justify-content: center;
            margin-top: 15px;
            font-size: 1.2rem;
            color: #6c757d;
            font-weight: 600;
        }
        
        .counter span {
            color: #1a2a6c;
            font-weight: 700;
            font-size: 1.4rem;
        }
        
        .floating-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #1a2a6c;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.8rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 10;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .subtitle {
                font-size: 1.1rem;
            }
            
            .word {
                font-size: 3rem;
            }
            
            .phonetic {
                font-size: 1.6rem;
            }
            
            .meaning {
                font-size: 2rem;
            }
            
            .example {
                font-size: 1.2rem;
                padding: 15px 20px;
            }
            
            .control-btn {
                font-size: 1.1rem;
                padding: 15px;
            }
            
            .pronounce-btn {
                width: 70px;
                height: 70px;
                font-size: 1.8rem;
            }
            
            .card-container {
                height: 350px;
            }
            
            .stats {
                font-size: 1rem;
                padding: 12px 15px;
            }
            
            .stat-value {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 480px) {
            .controls {
                flex-direction: column;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .meaning {
                font-size: 1.8rem;
            }
            
            .card-container {
                height: 400px;
            }
            
            .review-controls {
                flex-direction: column;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;floating-icon&quot;&gt;
            &lt;i class=&quot;fas fa-book&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;header&quot;&gt;
            &lt;h1&gt;单词学习闪卡系统&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot;&gt;个人感受、观点和经历 1 (108个单词)&lt;/p&gt;
            &lt;div class=&quot;progress-container&quot;&gt;
                &lt;div class=&quot;progress-bar&quot; id=&quot;progress&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stats&quot;&gt;
                &lt;div class=&quot;stat-item&quot;&gt;
                    &lt;div&gt;总单词&lt;/div&gt;
                    &lt;div class=&quot;stat-value&quot; id=&quot;total&quot;&gt;108&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;stat-item&quot;&gt;
                    &lt;div&gt;已掌握&lt;/div&gt;
                    &lt;div class=&quot;stat-value&quot; id=&quot;mastered&quot;&gt;0&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;stat-item&quot;&gt;
                    &lt;div&gt;待复习&lt;/div&gt;
                    &lt;div class=&quot;stat-value&quot; id=&quot;to-review&quot;&gt;0&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;main id=&quot;main-content&quot;&gt;
            &lt;div class=&quot;card-container&quot;&gt;
                &lt;div class=&quot;card&quot; id=&quot;flashcard&quot;&gt;
                    &lt;div class=&quot;card-face card-front&quot;&gt;
                        &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;apartment&lt;/div&gt;
                        &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/əˈpɑːrtmənt/&lt;/div&gt;
                        &lt;button class=&quot;pronounce-btn&quot; id=&quot;pronounce-btn&quot;&gt;
                            &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                        &lt;/button&gt;
                        &lt;div class=&quot;hint&quot;&gt;点击卡片查看释义和例句&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;card-face card-back&quot;&gt;
                        &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;公寓；单元房&lt;/div&gt;
                        &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;I live in a small apartment in the city center. (我住在市中心的一个小公寓里。)&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;counter&quot;&gt;
                当前进度: &lt;span id=&quot;current&quot;&gt;1&lt;/span&gt; / &lt;span id=&quot;total-counter&quot;&gt;108&lt;/span&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;controls&quot;&gt;
                &lt;button class=&quot;control-btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 我不认识
                &lt;/button&gt;
                &lt;button class=&quot;control-btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 我不确定
                &lt;/button&gt;
                &lt;button class=&quot;control-btn know&quot; id=&quot;know-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
                &lt;/button&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
                &lt;h3 class=&quot;review-title&quot;&gt;需要复习的单词 (&lt;span id=&quot;review-count&quot;&gt;0&lt;/span&gt;)&lt;/h3&gt;
                &lt;div class=&quot;review-list&quot; id=&quot;review-list&quot;&gt;&lt;/div&gt;
                &lt;div class=&quot;review-controls&quot;&gt;
                    &lt;button class=&quot;review-btn start-review&quot; id=&quot;start-review-btn&quot;&gt;开始复习&lt;/button&gt;
                    &lt;button class=&quot;review-btn finish-review&quot; id=&quot;finish-review-btn&quot;&gt;完成学习&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/main&gt;
        
        &lt;div class=&quot;completed&quot; id=&quot;completed&quot;&gt;
            &lt;h2&gt;恭喜！&lt;/h2&gt;
            &lt;p&gt;您已经掌握了所有108个单词！&lt;/p&gt;
            &lt;p&gt;继续努力，您的词汇量正在不断提升！&lt;/p&gt;
            &lt;button class=&quot;review-btn finish-review&quot; id=&quot;restart-btn&quot;&gt;重新开始学习&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 单词数据库 (完整108个单词)
        const words = [
            { word: &quot;apartment&quot;, phonetic: &quot;/əˈpɑːrtmənt/&quot;, meaning: &quot;公寓；单元房&quot;, example: &quot;I live in a small apartment in the city center. (我住在市中心的一个小公寓里。)&quot; },
            { word: &quot;bank&quot;, phonetic: &quot;/bæŋk/&quot;, meaning: &quot;银行；河岸&quot;, example: &quot;I need to go to the bank to withdraw some money. (我需要去银行取点钱。)&quot; },
            { word: &quot;block&quot;, phonetic: &quot;/blɒk/&quot;, meaning: &quot;街区；大楼&quot;, example: &quot;There&#x27;s a new restaurant on the next block. (下一个街区有一家新餐馆。)&quot; },
            { word: &quot;bookshop&quot;, phonetic: &quot;/ˈbʊkʃɒp/&quot;, meaning: &quot;书店&quot;, example: &quot;She bought a novel from the bookshop. (她从书店买了一本小说。)&quot; },
            { word: &quot;bookstore&quot;, phonetic: &quot;/ˈbʊkstɔː(r)/&quot;, meaning: &quot;书店&quot;, example: &quot;The bookstore has a wide selection of children&#x27;s books. (这家书店有大量的儿童书籍可供选择。)&quot; },
            { word: &quot;building&quot;, phonetic: &quot;/ˈbɪldɪŋ/&quot;, meaning: &quot;建筑物；楼房&quot;, example: &quot;The Empire State Building is an iconic structure in New York. (帝国大厦是纽约的标志性建筑。)&quot; },
            { word: &quot;cafe&quot;, phonetic: &quot;/ˈkæfeɪ/&quot;, meaning: &quot;咖啡馆；小餐馆&quot;, example: &quot;Let&#x27;s meet at the cafe near the park. (我们在公园附近的咖啡馆见面吧。)&quot; },
            { word: &quot;cafeteria&quot;, phonetic: &quot;/ˌkæfəˈtɪəriə/&quot;, meaning: &quot;自助餐厅&quot;, example: &quot;The school cafeteria serves lunch from 11:30 to 1:00. (学校自助餐厅从11:30到1:00供应午餐。)&quot; },
            { word: &quot;castle&quot;, phonetic: &quot;/ˈkɑːsl/&quot;, meaning: &quot;城堡&quot;, example: &quot;The medieval castle attracts many tourists. (这座中世纪城堡吸引了许多游客。)&quot; },
            { word: &quot;cinema&quot;, phonetic: &quot;/ˈsɪnəmə/&quot;, meaning: &quot;电影院&quot;, example: &quot;We went to the cinema to watch the new movie. (我们去电影院看了那部新电影。)&quot; },
            { word: &quot;college&quot;, phonetic: &quot;/ˈkɒlɪdʒ/&quot;, meaning: &quot;学院；大学&quot;, example: &quot;She is studying medicine at college. (她在大学学习医学。)&quot; },
            { word: &quot;department store&quot;, phonetic: &quot;/dɪˈpɑːtmənt stɔː(r)/&quot;, meaning: &quot;百货商店&quot;, example: &quot;We bought furniture at the department store. (我们在百货商店买了家具。)&quot; },
            { word: &quot;disco&quot;, phonetic: &quot;/ˈdɪskəʊ/&quot;, meaning: &quot;迪斯科舞厅&quot;, example: &quot;They went dancing at the disco last night. (他们昨晚去迪斯科舞厅跳舞了。)&quot; },
            { word: &quot;elevator&quot;, phonetic: &quot;/ˈelɪveɪtə(r)/&quot;, meaning: &quot;电梯&quot;, example: &quot;Please take the elevator to the fifth floor. (请乘电梯到五楼。)&quot; },
            { word: &quot;entrance&quot;, phonetic: &quot;/ˈentrəns/&quot;, meaning: &quot;入口；进入&quot;, example: &quot;The main entrance is on the south side of the building. (主入口在大楼的南侧。)&quot; },
            { word: &quot;exit&quot;, phonetic: &quot;/ˈeksɪt/&quot;, meaning: &quot;出口；离开&quot;, example: &quot;In case of fire, use the emergency exit. (如遇火灾，请使用紧急出口。)&quot; },
            { word: &quot;factory&quot;, phonetic: &quot;/ˈfæktri/&quot;, meaning: &quot;工厂&quot;, example: &quot;My father works in a car factory. (我父亲在一家汽车厂工作。)&quot; },
            { word: &quot;flat&quot;, phonetic: &quot;/flæt/&quot;, meaning: &quot;公寓&quot;, example: &quot;They rented a small flat in the city center. (他们在市中心租了一套小公寓。)&quot; },
            { word: &quot;garage&quot;, phonetic: &quot;/ˈɡærɑːʒ/&quot;, meaning: &quot;车库；汽车修理厂&quot;, example: &quot;He parked his car in the garage. (他把车停在车库里。)&quot; },
            { word: &quot;grocery store&quot;, phonetic: &quot;/ˈɡrəʊsəri stɔː(r)/&quot;, meaning: &quot;杂货店&quot;, example: &quot;I need to stop by the grocery store to buy some milk. (我需要去杂货店买些牛奶。)&quot; },
            { word: &quot;guesthouse&quot;, phonetic: &quot;/ˈɡesthaʊs/&quot;, meaning: &quot;家庭旅馆；宾馆&quot;, example: &quot;We stayed at a cozy guesthouse during our vacation. (我们在度假时住在一家舒适的家庭旅馆。)&quot; },
            { word: &quot;harbour&quot;, phonetic: &quot;/ˈhɑːbə(r)/&quot;, meaning: &quot;港口&quot;, example: &quot;The ship entered the harbour at dawn. (船在黎明时分进入港口。)&quot; },
            { word: &quot;hospital&quot;, phonetic: &quot;/ˈhɒspɪtl/&quot;, meaning: &quot;医院&quot;, example: &quot;He was taken to hospital after the accident. (事故发生后他被送往医院。)&quot; },
            { word: &quot;hotel&quot;, phonetic: &quot;/həʊˈtel/&quot;, meaning: &quot;酒店；旅馆&quot;, example: &quot;They booked a luxury hotel for their honeymoon. (他们为蜜月预订了一家豪华酒店。)&quot; },
            { word: &quot;house&quot;, phonetic: &quot;/haʊs/&quot;, meaning: &quot;房屋；住宅&quot;, example: &quot;They bought a beautiful house by the lake. (他们在湖边买了一栋漂亮的房子。)&quot; },
            { word: &quot;library&quot;, phonetic: &quot;/ˈlaɪbrəri/&quot;, meaning: &quot;图书馆&quot;, example: &quot;I borrowed three books from the library. (我从图书馆借了三本书。)&quot; },
            { word: &quot;lift&quot;, phonetic: &quot;/lɪft/&quot;, meaning: &quot;电梯；搭便车&quot;, example: &quot;Take the lift to the 10th floor. (乘电梯到10楼。)&quot; },
            { word: &quot;museum&quot;, phonetic: &quot;/mjuˈziːəm/&quot;, meaning: &quot;博物馆&quot;, example: &quot;The museum has a collection of ancient artifacts. (该博物馆收藏了一批古代文物。)&quot; },
            { word: &quot;office&quot;, phonetic: &quot;/ˈɒfɪs/&quot;, meaning: &quot;办公室；事务所&quot;, example: &quot;Her office is on the top floor of the building. (她的办公室在顶楼。)&quot; },
            { word: &quot;pharmacy&quot;, phonetic: &quot;/ˈfɑːməsi/&quot;, meaning: &quot;药房；药店&quot;, example: &quot;You can get your prescription filled at the pharmacy. (你可以在药房配药。)&quot; },
            { word: &quot;police station&quot;, phonetic: &quot;/pəˈliːs steɪʃn/&quot;, meaning: &quot;警察局&quot;, example: &quot;He reported the theft at the police station. (他在警察局报告了盗窃案。)&quot; },
            { word: &quot;port&quot;, phonetic: &quot;/pɔːt/&quot;, meaning: &quot;港口&quot;, example: &quot;The cruise ship arrived at the port yesterday. (邮轮昨天抵达港口。)&quot; },
            { word: &quot;post office&quot;, phonetic: &quot;/ˈpəʊst ɒfɪs/&quot;, meaning: &quot;邮局&quot;, example: &quot;I need to go to the post office to send this package. (我需要去邮局寄这个包裹。)&quot; },
            { word: &quot;railway station&quot;, phonetic: &quot;/ˈreɪlweɪ steɪʃn/&quot;, meaning: &quot;火车站&quot;, example: &quot;The train departs from platform 3 at the railway station. (火车从火车站3号站台出发。)&quot; },
            { word: &quot;school&quot;, phonetic: &quot;/skuːl/&quot;, meaning: &quot;学校&quot;, example: &quot;Children go to school from Monday to Friday. (孩子们周一到周五上学。)&quot; },
            { word: &quot;shop&quot;, phonetic: &quot;/ʃɒp/&quot;, meaning: &quot;商店；店铺&quot;, example: &quot;There&#x27;s a flower shop on the corner. (拐角处有一家花店。)&quot; },
            { word: &quot;sports centre&quot;, phonetic: &quot;/spɔːts ˈsentə(r)/&quot;, meaning: &quot;体育中心&quot;, example: &quot;The new sports centre has a swimming pool and a gym. (新建的体育中心有游泳池和健身房。)&quot; },
            { word: &quot;stadium&quot;, phonetic: &quot;/ˈsteɪdiəm/&quot;, meaning: &quot;体育场&quot;, example: &quot;The football match will be held at the city stadium. (足球比赛将在市体育场举行。)&quot; },
            { word: &quot;supermarket&quot;, phonetic: &quot;/ˈsuːpəmɑːkɪt/&quot;, meaning: &quot;超市&quot;, example: &quot;We do our weekly grocery shopping at the supermarket. (我们在超市进行每周一次的食品采购。)&quot; },
            { word: &quot;swimming pool&quot;, phonetic: &quot;/ˈswɪmɪŋ puːl/&quot;, meaning: &quot;游泳池&quot;, example: &quot;The hotel has an indoor swimming pool. (这家酒店有一个室内游泳池。)&quot; },
            { word: &quot;theatre&quot;, phonetic: &quot;/ˈθɪətə(r)/&quot;, meaning: &quot;剧院；电影院&quot;, example: &quot;We have tickets for the theatre tonight. (我们有今晚剧院的票。)&quot; },
            { word: &quot;university&quot;, phonetic: &quot;/ˌjuːnɪˈvɜːsəti/&quot;, meaning: &quot;大学&quot;, example: &quot;He received a scholarship to study at the university. (他获得了大学奖学金。)&quot; }
        ];
        
        // DOM元素
        const flashcard = document.getElementById(&#x27;flashcard&#x27;);
        const wordElement = document.getElementById(&#x27;word&#x27;);
        const phoneticElement = document.getElementById(&#x27;phonetic&#x27;);
        const meaningElement = document.getElementById(&#x27;meaning&#x27;);
        const exampleElement = document.getElementById(&#x27;example&#x27;);
        const pronounceBtn = document.getElementById(&#x27;pronounce-btn&#x27;);
        const progressBar = document.getElementById(&#x27;progress&#x27;);
        const totalElement = document.getElementById(&#x27;total&#x27;);
        const masteredElement = document.getElementById(&#x27;mastered&#x27;);
        const toReviewElement = document.getElementById(&#x27;to-review&#x27;);
        const currentElement = document.getElementById(&#x27;current&#x27;);
        const totalCounterElement = document.getElementById(&#x27;total-counter&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const completedSection = document.getElementById(&#x27;completed&#x27;);
        const restartBtn = document.getElementById(&#x27;restart-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewList = document.getElementById(&#x27;review-list&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const startReviewBtn = document.getElementById(&#x27;start-review-btn&#x27;);
        const finishReviewBtn = document.getElementById(&#x27;finish-review-btn&#x27;);
        const mainContent = document.getElementById(&#x27;main-content&#x27;);
        
        // 应用状态
        let appState = {
            currentIndex: 0,
            mastered: 0,
            toReview: [],
            learningMode: true,
            currentDeck: [...words],
            reviewedWords: []
        };
        
        // 初始化应用
        function initApp() {
            appState = {
                currentIndex: 0,
                mastered: 0,
                toReview: [],
                learningMode: true,
                currentDeck: [...words],
                reviewedWords: []
            };
            
            shuffleArray(appState.currentDeck);
            updateStats();
            updateCard();
            completedSection.style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;none&#x27;;
            mainContent.style.display = &#x27;block&#x27;;
        }
        
        // 随机打乱数组
        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
        
        // 更新卡片内容
        function updateCard() {
            const currentWord = appState.currentDeck[appState.currentIndex];
            wordElement.textContent = currentWord.word;
            phoneticElement.textContent = currentWord.phonetic;
            meaningElement.textContent = currentWord.meaning;
            exampleElement.textContent = currentWord.example;
            
            // 更新计数器
            currentElement.textContent = appState.currentIndex + 1;
            totalCounterElement.textContent = appState.currentDeck.length;
            
            // 确保卡片是正面
            flashcard.classList.remove(&#x27;flipped&#x27;);
        }
        
        // 更新统计信息
        function updateStats() {
            const total = words.length;
            totalElement.textContent = total;
            masteredElement.textContent = appState.mastered;
            toReviewElement.textContent = appState.toReview.length;
            
            // 更新进度条
            const progress = appState.learningMode ? 
                (appState.currentIndex / words.length * 100) : 
                ((appState.mastered + appState.toReview.length) / words.length * 100);
            
            progressBar.style.width = `${progress}%`;
        }
        
        // 处理下一个单词
        function nextWord() {
            // 保存当前单词状态
            if (!appState.learningMode) {
                appState.reviewedWords.push(appState.currentDeck[appState.currentIndex]);
            }
            
            // 移动到下一个单词
            appState.currentIndex++;
            
            if (appState.currentIndex &gt;= appState.currentDeck.length) {
                // 当前卡片组结束
                if (appState.learningMode) {
                    // 学习模式结束，进入复习模式
                    showReviewSection();
                    return;
                } else {
                    // 复习模式结束
                    if (appState.toReview.length === 0) {
                        // 没有需要复习的单词
                        showCompletion();
                        return;
                    }
                    
                    // 开始新一轮复习
                    appState.currentDeck = [...appState.toReview];
                    appState.toReview = [];
                    appState.currentIndex = 0;
                    appState.reviewedWords = [];
                    shuffleArray(appState.currentDeck);
                }
            }
            
            updateCard();
            updateStats();
        }
        
        // 显示复习区域
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            reviewCount.textContent = appState.toReview.length;
            
            // 清空复习列表
            reviewList.innerHTML = &#x27;&#x27;;
            
            // 添加需要复习的单词
            appState.toReview.forEach(word =&gt; {
                const wordElement = document.createElement(&#x27;div&#x27;);
                wordElement.className = &#x27;review-word&#x27;;
                wordElement.textContent = word.word;
                wordElement.dataset.word = word.word;
                reviewList.appendChild(wordElement);
            });
            
            // 添加事件监听器
            document.querySelectorAll(&#x27;.review-word&#x27;).forEach(item =&gt; {
                item.addEventListener(&#x27;click&#x27;, () =&gt; {
                    const word = item.dataset.word;
                    const wordObj = appState.toReview.find(w =&gt; w.word === word);
                    
                    if (wordObj) {
                        // 显示单词详情
                        wordElement.textContent = wordObj.word;
                        phoneticElement.textContent = wordObj.phonetic;
                        meaningElement.textContent = wordObj.meaning;
                        exampleElement.textContent = wordObj.example;
                        
                        // 确保卡片是正面
                        flashcard.classList.remove(&#x27;flipped&#x27;);
                    }
                });
            });
        }
        
        // 开始复习
        function startReview() {
            appState.learningMode = false;
            appState.currentDeck = [...appState.toReview];
            appState.toReview = [];
            appState.currentIndex = 0;
            shuffleArray(appState.currentDeck);
            
            reviewSection.style.display = &#x27;none&#x27;;
            updateCard();
            updateStats();
        }
        
        // 显示完成页面
        function showCompletion() {
            mainContent.style.display = &#x27;none&#x27;;
            completedSection.style.display = &#x27;block&#x27;;
            progressBar.style.width = &#x27;100%&#x27;;
        }
        
        // 单词发音
        function pronounceWord() {
            const word = appState.currentDeck[appState.currentIndex].word;
            
            // 使用Web Speech API进行发音
            if (&#x27;speechSynthesis&#x27; in window) {
                speechSynthesis.cancel(); // 取消当前正在进行的发音
                const utterance = new SpeechSynthesisUtterance(word);
                utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                utterance.rate = 0.9; // 稍微慢一点
                utterance.pitch = 1; // 正常音高
                speechSynthesis.speak(utterance);
            } else {
                alert(&#x27;您的浏览器不支持语音合成功能&#x27;);
            }
        }
        
        // 事件监听器
        flashcard.addEventListener(&#x27;click&#x27;, () =&gt; {
            flashcard.classList.toggle(&#x27;flipped&#x27;);
        });
        
        pronounceBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            pronounceWord();
        });
        
        knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            if (appState.learningMode) {
                appState.mastered++;
            }
            nextWord();
        });
        
        dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            if (appState.learningMode) {
                appState.toReview.push(appState.currentDeck[appState.currentIndex]);
            } else {
                // 复习模式中仍然不认识
                appState.toReview.push(appState.currentDeck[appState.currentIndex]);
            }
            nextWord();
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            if (appState.learningMode) {
                appState.toReview.push(appState.currentDeck[appState.currentIndex]);
            } else {
                // 复习模式中不确定
                appState.toReview.push(appState.currentDeck[appState.currentIndex]);
            }
            nextWord();
        });
        
        restartBtn.addEventListener(&#x27;click&#x27;, initApp);
        startReviewBtn.addEventListener(&#x27;click&#x27;, startReview);
        
        finishReviewBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            if (appState.toReview.length === 0) {
                showCompletion();
            } else {
                startReview();
            }
        });
        
        // 初始化应用
        window.addEventListener(&#x27;load&#x27;, () =&gt; {
            totalCounterElement.textContent = words.length;
            initApp();
            
            // 添加键盘快捷键支持
            document.addEventListener(&#x27;keydown&#x27;, (e) =&gt; {
                if (e.key === &#x27; &#x27;) {
                    // 空格键翻转卡片
                    flashcard.classList.toggle(&#x27;flipped&#x27;);
                    e.preventDefault();
                } else if (e.key === &#x27;1&#x27;) {
                    // 数字1标记为&quot;我认识&quot;
                    knowBtn.click();
                } else if (e.key === &#x27;2&#x27;) {
                    // 数字2标记为&quot;我不认识&quot;
                    dontKnowBtn.click();
                } else if (e.key === &#x27;3&#x27;) {
                    // 数字3标记为&quot;我不确定&quot;
                    unsureBtn.click();
                } else if (e.key === &#x27;p&#x27;) {
                    // P键发音
                    pronounceWord();
                }
            });
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="16-地点-乡村-" class="section">
      <div class="section-header">
        <h2>16 地点（乡村）</h2>
        <div class="section-actions">
          <button onclick="openStandalone('16 地点（乡村） .html')">打开原文件</button>
          <button onclick="toggleHeight('16-地点-乡村-')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;自然景观单词学习卡片&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #2c3e50, #1a1a2e);
            padding: 20px;
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            padding: 30px;
            position: relative;
            border: 2px solid #3498db;
        }
        
        .nature-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.1;
            background-image: url(&#x27;data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;&lt;path d=&quot;M20,20 C40,10 60,10 80,20 C90,40 90,60 80,80 C60,90 40,90 20,80 C10,60 10,40 20,20 Z&quot; fill=&quot;%233498db&quot;/&gt;&lt;path d=&quot;M40,30 C50,25 60,25 70,30 C75,40 75,50 70,60 C60,65 50,65 40,60 C35,50 35,40 40,30 Z&quot; fill=&quot;%232ecc71&quot;/&gt;&lt;circle cx=&quot;30&quot; cy=&quot;50&quot; r=&quot;5&quot; fill=&quot;%23e74c3c&quot;/&gt;&lt;circle cx=&quot;70&quot; cy=&quot;50&quot; r=&quot;5&quot; fill=&quot;%23e74c3c&quot;/&gt;&lt;/svg&gt;&#x27;);
            background-size: 200px;
            z-index: 0;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }
        
        h1 {
            color: #fff;
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            letter-spacing: 1px;
        }
        
        .subtitle {
            color: #3498db;
            font-size: 1.2rem;
            margin-top: 5px;
            font-weight: 500;
        }
        
        .progress-container {
            background-color: #1e2a38;
            border-radius: 10px;
            height: 20px;
            margin: 25px 0;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
            position: relative;
            z-index: 2;
            border: 1px solid #2c3e50;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            border-radius: 10px;
            transition: width 0.4s ease;
            box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background-color: rgba(30, 42, 56, 0.8);
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            border: 1px solid #2c3e50;
        }
        
        .stat-box {
            text-align: center;
            padding: 10px;
            flex: 1;
        }
        
        .stat-box h3 {
            font-size: 1.8rem;
            color: #3498db;
            margin-bottom: 5px;
            text-shadow: 0 0 10px rgba(52, 152, 219, 0.7);
        }
        
        .stat-box p {
            color: #ecf0f1;
            font-weight: 500;
        }
        
        /* 卡片容器 */
        .card-container {
            perspective: 1500px;
            height: 350px;
            margin: 30px 0;
            position: relative;
            z-index: 2;
        }
        
        .card {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            border-radius: 20px;
        }
        
        .card-front {
            background: linear-gradient(135deg, #1a2980, #26d0ce);
            color: #fff;
            border: 3px solid #3498db;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 20px rgba(52, 152, 219, 0.5);
        }
        
        .card-back {
            background: linear-gradient(135deg, #2c3e50, #1a1a2e);
            color: #fff;
            transform: rotateY(180deg);
            border: 3px solid #2ecc71;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 20px rgba(46, 204, 113, 0.5);
        }
        
        .word {
            font-size: 4.5rem;
            font-weight: 700;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            margin-bottom: 15px;
            text-align: center;
            color: #fff;
        }
        
        .phonetic {
            font-size: 1.8rem;
            margin-bottom: 25px;
            color: rgba(255,255,255,0.9);
            font-style: italic;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        
        .meaning {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 25px;
            text-align: center;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            color: #fff;
        }
        
        .example {
            font-size: 1.5rem;
            text-align: center;
            line-height: 1.6;
            max-width: 90%;
            font-style: italic;
            color: rgba(255,255,255,0.9);
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
            background: rgba(0,0,0,0.3);
            padding: 10px 20px;
            border-radius: 10px;
            border-left: 3px solid #2ecc71;
        }
        
        .pronounce-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            backdrop-filter: blur(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            margin-top: 15px;
            border: 2px solid #fff;
        }
        
        .pronounce-btn:hover {
            transform: scale(1.1);
            background: rgba(255,255,255,0.3);
            box-shadow: 0 0 20px rgba(255,255,255,0.5);
        }
        
        .pronounce-btn i {
            font-size: 30px;
            color: white;
        }
        
        .hint {
            position: absolute;
            bottom: 15px;
            color: rgba(255,255,255,0.8);
            font-size: 1rem;
            animation: pulse 2s infinite;
            background: rgba(0,0,0,0.3);
            padding: 5px 10px;
            border-radius: 20px;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        /* 按钮容器 */
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;
        }
        
        .btn {
            padding: 16px 40px;
            font-size: 1.3rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border: 2px solid rgba(255,255,255,0.3);
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.5);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-know {
            background: linear-gradient(to right, #2ecc71, #1abc9c);
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .btn-dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .btn-unsure {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .btn i {
            font-size: 1.4rem;
        }
        
        /* 复习模式 */
        .review-section {
            margin-top: 40px;
            padding: 25px;
            background: rgba(30, 42, 56, 0.8);
            border-radius: 15px;
            display: none;
            position: relative;
            z-index: 2;
            border: 1px solid #2c3e50;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .review-section h2 {
            text-align: center;
            color: #3498db;
            margin-bottom: 20px;
            font-size: 1.8rem;
            text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .word-tag {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        .word-tag:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        
        .restart-btn {
            display: block;
            margin: 20px auto 0;
            padding: 15px 40px;
            background: linear-gradient(to right, #9b59b6, #8e44ad);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        .restart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.5);
        }
        
        .completion-message {
            text-align: center;
            padding: 40px;
            display: none;
            position: relative;
            z-index: 2;
            background: rgba(30, 42, 56, 0.8);
            border-radius: 20px;
            border: 1px solid #2c3e50;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .completion-message h2 {
            font-size: 3rem;
            color: #2ecc71;
            margin-bottom: 20px;
            text-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
        }
        
        .completion-message p {
            font-size: 1.4rem;
            color: #ecf0f1;
            margin-bottom: 30px;
        }
        
        .fireworks {
            font-size: 4rem;
            animation: fireworks 1.5s infinite;
            display: inline-block;
            text-shadow: 0 0 10px #3498db, 0 0 20px #2ecc71;
        }
        
        @keyframes fireworks {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-20px) scale(1.2); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .word {
                font-size: 3.5rem;
            }
            
            .meaning {
                font-size: 2.2rem;
            }
            
            .btn {
                padding: 14px 30px;
                font-size: 1.1rem;
            }
            
            .card-container {
                height: 300px;
            }
        }
        
        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }
            
            .word {
                font-size: 2.8rem;
            }
            
            .meaning {
                font-size: 1.8rem;
            }
            
            .btn-container {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1rem;
            }
            
            .card-container {
                height: 270px;
            }
            
            .example {
                font-size: 1.2rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;nature-bg&quot;&gt;&lt;/div&gt;
        
        &lt;header&gt;
            &lt;h1&gt;自然景观单词学习卡片&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot; id=&quot;subtitle&quot;&gt;高对比度设计 · 19个单词强化记忆&lt;/p&gt;
        &lt;/header&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;learnedCount&quot;&gt;0&lt;/h3&gt;
                &lt;p&gt;已掌握&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;reviewCount&quot;&gt;0&lt;/h3&gt;
                &lt;p&gt;需复习&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;totalCount&quot;&gt;19&lt;/h3&gt;
                &lt;p&gt;总单词&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;wordCard&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;currentWord&quot;&gt;area&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈeəriə/&lt;/div&gt;
                    &lt;button class=&quot;pronounce-btn&quot; id=&quot;pronounceBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片查看释义和例句&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;区域&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;This is a protected natural area.&lt;/div&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;btn-container&quot;&gt;
            &lt;button class=&quot;btn btn-know&quot; id=&quot;btnKnow&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn btn-dont-know&quot; id=&quot;btnDontKnow&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 我不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn btn-unsure&quot; id=&quot;btnUnsure&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 我不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;button class=&quot;restart-btn&quot; id=&quot;restartBtn&quot;&gt;
                &lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 重新学习这些单词
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completion-message&quot; id=&quot;completionMessage&quot;&gt;
            &lt;h2&gt;恭喜！ &lt;span class=&quot;fireworks&quot;&gt;🎉&lt;/span&gt;&lt;/h2&gt;
            &lt;p&gt;您已经掌握了所有19个自然景观单词！&lt;/p&gt;
            &lt;button class=&quot;restart-btn&quot; onclick=&quot;location.reload()&quot;&gt;
                &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新开始学习
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 单词数据 - 自然景观主题
        const wordData = [
            { word: &quot;area&quot;, phonetic: &quot;/ˈeəriə/&quot;, meaning: &quot;区域&quot;, example: &quot;This is a protected natural area.&quot; },
            { word: &quot;beach&quot;, phonetic: &quot;/biːtʃ/&quot;, meaning: &quot;海滩&quot;, example: &quot;We spent the day relaxing on the sandy beach.&quot; },
            { word: &quot;campsite&quot;, phonetic: &quot;/ˈkæmpsaɪt/&quot;, meaning: &quot;露营地&quot;, example: &quot;We set up our tent at the campsite near the lake.&quot; },
            { word: &quot;farm&quot;, phonetic: &quot;/fɑːm/&quot;, meaning: &quot;农场&quot;, example: &quot;The children enjoyed visiting the farm and seeing the animals.&quot; },
            { word: &quot;field&quot;, phonetic: &quot;/fiːld/&quot;, meaning: &quot;田野&quot;, example: &quot;The golden field of wheat stretched as far as the eye could see.&quot; },
            { word: &quot;forest&quot;, phonetic: &quot;/ˈfɒrɪst/&quot;, meaning: &quot;森林&quot;, example: &quot;We went hiking through the dense forest.&quot; },
            { word: &quot;hill&quot;, phonetic: &quot;/hɪl/&quot;, meaning: &quot;小山&quot;, example: &quot;The village is situated on top of a small hill.&quot; },
            { word: &quot;island&quot;, phonetic: &quot;/ˈaɪlənd/&quot;, meaning: &quot;岛屿&quot;, example: &quot;They spent their vacation on a tropical island.&quot; },
            { word: &quot;lake&quot;, phonetic: &quot;/leɪk/&quot;, meaning: &quot;湖泊&quot;, example: &quot;The clear blue lake was perfect for swimming.&quot; },
            { word: &quot;mountain&quot;, phonetic: &quot;/ˈmaʊntɪn/&quot;, meaning: &quot;山脉&quot;, example: &quot;We climbed the mountain to see the sunrise.&quot; },
            { word: &quot;path&quot;, phonetic: &quot;/pɑːθ/&quot;, meaning: &quot;小路&quot;, example: &quot;We followed the winding path through the woods.&quot; },
            { word: &quot;railway&quot;, phonetic: &quot;/ˈreɪlweɪ/&quot;, meaning: &quot;铁路&quot;, example: &quot;The old railway has been converted into a walking trail.&quot; },
            { word: &quot;rainforest&quot;, phonetic: &quot;/ˈreɪnfɒrɪst/&quot;, meaning: &quot;雨林&quot;, example: &quot;The Amazon rainforest is home to countless species.&quot; },
            { word: &quot;river&quot;, phonetic: &quot;/ˈrɪvə/&quot;, meaning: &quot;河流&quot;, example: &quot;The river flows through three different countries.&quot; },
            { word: &quot;sea&quot;, phonetic: &quot;/siː/&quot;, meaning: &quot;海洋&quot;, example: &quot;The sea was calm and perfect for sailing.&quot; },
            { word: &quot;sky&quot;, phonetic: &quot;/skaɪ/&quot;, meaning: &quot;天空&quot;, example: &quot;The night sky was filled with stars.&quot; },
            { word: &quot;village&quot;, phonetic: &quot;/ˈvɪlɪdʒ/&quot;, meaning: &quot;村庄&quot;, example: &quot;The small fishing village was picturesque.&quot; },
            { word: &quot;wood&quot;, phonetic: &quot;/wʊd/&quot;, meaning: &quot;树林&quot;, example: &quot;We went for a walk in the ancient wood.&quot; }
        ];

        // 学习状态变量
        let currentWordIndex = 0;
        let learnedWords = [];
        let wordsToReview = [];
        let allWords = [...wordData];
        
        // DOM 元素
        const wordCard = document.getElementById(&#x27;wordCard&#x27;);
        const currentWord = document.getElementById(&#x27;currentWord&#x27;);
        const phonetic = document.getElementById(&#x27;phonetic&#x27;);
        const meaning = document.getElementById(&#x27;meaning&#x27;);
        const example = document.getElementById(&#x27;example&#x27;);
        const pronounceBtn = document.getElementById(&#x27;pronounceBtn&#x27;);
        const btnKnow = document.getElementById(&#x27;btnKnow&#x27;);
        const btnDontKnow = document.getElementById(&#x27;btnDontKnow&#x27;);
        const btnUnsure = document.getElementById(&#x27;btnUnsure&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const learnedCount = document.getElementById(&#x27;learnedCount&#x27;);
        const reviewCount = document.getElementById(&#x27;reviewCount&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const restartBtn = document.getElementById(&#x27;restartBtn&#x27;);
        const completionMessage = document.getElementById(&#x27;completionMessage&#x27;);
        
        // 初始化
        function init() {
            shuffleArray(allWords);
            showWord();
            updateProgress();
        }
        
        // 随机打乱数组
        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
        
        // 显示当前单词
        function showWord() {
            if (allWords.length === 0) {
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            const wordObj = allWords[currentWordIndex];
            currentWord.textContent = wordObj.word;
            phonetic.textContent = wordObj.phonetic;
            meaning.textContent = wordObj.meaning;
            example.textContent = wordObj.example;
            
            // 确保卡片正面朝上
            wordCard.classList.remove(&#x27;flipped&#x27;);
        }
        
        // 更新进度
        function updateProgress() {
            const totalWords = wordData.length;
            const learned = learnedWords.length;
            const progress = (learned / totalWords) * 100;
            
            progressBar.style.width = `${progress}%`;
            learnedCount.textContent = learned;
            reviewCount.textContent = wordsToReview.length;
        }
        
        // 播放发音
        function playPronunciation() {
            const word = allWords[currentWordIndex].word;
            const utterance = new SpeechSynthesisUtterance(word);
            utterance.lang = &#x27;en-GB&#x27;;
            utterance.rate = 0.9;
            utterance.pitch = 1;
            speechSynthesis.speak(utterance);
        }
        
        // 下一个单词
        function nextWord() {
            allWords.splice(currentWordIndex, 1);
            
            if (allWords.length &gt; 0) {
                currentWordIndex = Math.floor(Math.random() * allWords.length);
                showWord();
            } else {
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
            }
            
            updateProgress();
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 创建单词标签
            wordsToReview.forEach(wordObj =&gt; {
                const wordTag = document.createElement(&#x27;div&#x27;);
                wordTag.classList.add(&#x27;word-tag&#x27;);
                wordTag.textContent = wordObj.word;
                reviewWords.appendChild(wordTag);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completionMessage.style.display = &#x27;block&#x27;;
        }
        
        // 事件监听器
        wordCard.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordCard.classList.toggle(&#x27;flipped&#x27;);
        });
        
        pronounceBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation();
            playPronunciation();
        });
        
        btnKnow.addEventListener(&#x27;click&#x27;, () =&gt; {
            learnedWords.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        btnDontKnow.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordsToReview.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        btnUnsure.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordsToReview.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        restartBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将需要复习的单词设为新的学习列表
            allWords = [...wordsToReview];
            wordsToReview = [];
            shuffleArray(allWords);
            currentWordIndex = 0;
            reviewSection.style.display = &#x27;none&#x27;;
            showWord();
            updateProgress();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="17-地点-城镇-" class="section">
      <div class="section-header">
        <h2>17 地点（城镇）</h2>
        <div class="section-actions">
          <button onclick="openStandalone('17 地点（城镇） .html')">打开原文件</button>
          <button onclick="toggleHeight('17-地点-城镇-')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;地点单词学习卡片&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            padding: 20px;
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            padding: 30px;
            position: relative;
        }
        
        .decoration {
            position: absolute;
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            border-radius: 50%;
            top: -75px;
            right: -75px;
            opacity: 0.1;
        }
        
        .decoration:nth-child(2) {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #2ecc71, #1abc9c);
            bottom: -50px;
            left: -50px;
            top: auto;
            right: auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }
        
        h1 {
            color: #2c3e50;
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 1.2rem;
            margin-top: 5px;
        }
        
        .progress-container {
            background-color: #ecf0f1;
            border-radius: 10px;
            height: 20px;
            margin: 25px 0;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
            position: relative;
            z-index: 2;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            border-radius: 10px;
            transition: width 0.4s ease;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            position: relative;
            z-index: 2;
        }
        
        .stat-box {
            text-align: center;
            padding: 10px;
            flex: 1;
        }
        
        .stat-box h3 {
            font-size: 1.8rem;
            color: #3498db;
            margin-bottom: 5px;
        }
        
        .stat-box p {
            color: #7f8c8d;
            font-weight: 500;
        }
        
        /* 卡片容器 */
        .card-container {
            perspective: 1500px;
            height: 350px;
            margin: 30px 0;
            position: relative;
            z-index: 2;
        }
        
        .card {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            border-radius: 20px;
        }
        
        .card-front {
            background: linear-gradient(135deg, #3498db, #8e44ad);
            color: white;
        }
        
        .card-back {
            background: linear-gradient(135deg, #2ecc71, #1abc9c);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 4.5rem;
            font-weight: 700;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
            margin-bottom: 15px;
            text-align: center;
        }
        
        .phonetic {
            font-size: 1.8rem;
            margin-bottom: 25px;
            color: rgba(255,255,255,0.9);
            font-style: italic;
        }
        
        .meaning {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 25px;
            text-align: center;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        .example {
            font-size: 1.5rem;
            text-align: center;
            line-height: 1.6;
            max-width: 90%;
            font-style: italic;
            color: rgba(255,255,255,0.95);
            text-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        
        .pronounce-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            backdrop-filter: blur(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            margin-top: 15px;
        }
        
        .pronounce-btn:hover {
            transform: scale(1.1);
            background: rgba(255,255,255,0.3);
        }
        
        .pronounce-btn i {
            font-size: 30px;
            color: white;
        }
        
        .hint {
            position: absolute;
            bottom: 15px;
            color: rgba(255,255,255,0.8);
            font-size: 1rem;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        /* 按钮容器 */
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;
        }
        
        .btn {
            padding: 16px 40px;
            font-size: 1.3rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-know {
            background: linear-gradient(to right, #2ecc71, #1abc9c);
            color: white;
        }
        
        .btn-dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn-unsure {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
        }
        
        .btn i {
            font-size: 1.4rem;
        }
        
        /* 复习模式 */
        .review-section {
            margin-top: 40px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 15px;
            display: none;
            position: relative;
            z-index: 2;
        }
        
        .review-section h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .word-tag {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
        }
        
        .word-tag:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .restart-btn {
            display: block;
            margin: 20px auto 0;
            padding: 15px 40px;
            background: linear-gradient(to right, #9b59b6, #8e44ad);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .restart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        }
        
        .completion-message {
            text-align: center;
            padding: 40px;
            display: none;
            position: relative;
            z-index: 2;
        }
        
        .completion-message h2 {
            font-size: 3rem;
            color: #2ecc71;
            margin-bottom: 20px;
        }
        
        .completion-message p {
            font-size: 1.4rem;
            color: #7f8c8d;
            margin-bottom: 30px;
        }
        
        .fireworks {
            font-size: 4rem;
            animation: fireworks 1.5s infinite;
            display: inline-block;
        }
        
        @keyframes fireworks {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-20px) scale(1.2); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .word {
                font-size: 3.5rem;
            }
            
            .meaning {
                font-size: 2.2rem;
            }
            
            .btn {
                padding: 14px 30px;
                font-size: 1.1rem;
            }
            
            .card-container {
                height: 300px;
            }
        }
        
        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }
            
            .word {
                font-size: 2.8rem;
            }
            
            .meaning {
                font-size: 1.8rem;
            }
            
            .btn-container {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1rem;
            }
            
            .card-container {
                height: 270px;
            }
            
            .example {
                font-size: 1.2rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;decoration&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;decoration&quot;&gt;&lt;/div&gt;
        
        &lt;header&gt;
            &lt;h1&gt;地点单词学习卡片&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot; id=&quot;subtitle&quot;&gt;&quot;地点：城镇&quot; - 学习卡片&lt;/p&gt;
        &lt;/header&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;learnedCount&quot;&gt;0&lt;/h3&gt;
                &lt;p&gt;已掌握&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;reviewCount&quot;&gt;0&lt;/h3&gt;
                &lt;p&gt;需复习&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;totalCount&quot;&gt;0&lt;/h3&gt;
                &lt;p&gt;总单词&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;wordCard&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;currentWord&quot;&gt;airport&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈeəpɔːt/&lt;/div&gt;
                    &lt;button class=&quot;pronounce-btn&quot; id=&quot;pronounceBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片查看释义和例句&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;机场&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;We will meet at the airport tomorrow morning.&lt;/div&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;btn-container&quot;&gt;
            &lt;button class=&quot;btn btn-know&quot; id=&quot;btnKnow&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn btn-dont-know&quot; id=&quot;btnDontKnow&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 我不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn btn-unsure&quot; id=&quot;btnUnsure&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 我不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;button class=&quot;restart-btn&quot; id=&quot;restartBtn&quot;&gt;
                &lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 重新学习这些单词
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completion-message&quot; id=&quot;completionMessage&quot;&gt;
            &lt;h2&gt;恭喜！ &lt;span class=&quot;fireworks&quot;&gt;🎉&lt;/span&gt;&lt;/h2&gt;
            &lt;p id=&quot;completionText&quot;&gt;您已经掌握了所有地点单词！&lt;/p&gt;
            &lt;button class=&quot;restart-btn&quot; onclick=&quot;location.reload()&quot;&gt;
                &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新开始学习
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 单词数据
        const wordData = [
            { word: &quot;airport&quot;, phonetic: &quot;/ˈeəpɔːt/&quot;, meaning: &quot;机场&quot;, example: &quot;We will meet at the airport tomorrow morning.&quot; },
            { word: &quot;bridge&quot;, phonetic: &quot;/brɪdʒ/&quot;, meaning: &quot;桥&quot;, example: &quot;The old stone bridge crosses the river.&quot; },
            { word: &quot;bus station&quot;, phonetic: &quot;/ˈbʌs ˌsteɪʃən/&quot;, meaning: &quot;公交车站&quot;, example: &quot;The bus station is located in the city center.&quot; },
            { word: &quot;bus stop&quot;, phonetic: &quot;/ˈbʌs stɒp/&quot;, meaning: &quot;公交站&quot;, example: &quot;There&#x27;s a bus stop right in front of my house.&quot; },
            { word: &quot;car park&quot;, phonetic: &quot;/ˈkɑː pɑːk/&quot;, meaning: &quot;停车场&quot;, example: &quot;The shopping mall has a large car park.&quot; },
            { word: &quot;city centre&quot;, phonetic: &quot;/ˈsɪti ˌsentə/&quot;, meaning: &quot;市中心&quot;, example: &quot;The city centre is always busy during weekends.&quot; },
            { word: &quot;corner&quot;, phonetic: &quot;/ˈkɔːnə/&quot;, meaning: &quot;角落&quot;, example: &quot;There&#x27;s a nice café on the corner of the street.&quot; },
            { word: &quot;market&quot;, phonetic: &quot;/ˈmɑːkɪt/&quot;, meaning: &quot;市场&quot;, example: &quot;We buy fresh vegetables at the local market.&quot; },
            { word: &quot;motorway&quot;, phonetic: &quot;/ˈməʊtəweɪ/&quot;, meaning: &quot;高速公路&quot;, example: &quot;The motorway connects the two major cities.&quot; },
            { word: &quot;park&quot;, phonetic: &quot;/pɑːk/&quot;, meaning: &quot;公园&quot;, example: &quot;Children are playing in the park.&quot; },
            { word: &quot;petrol station&quot;, phonetic: &quot;/ˈpetrəl ˌsteɪʃən/&quot;, meaning: &quot;加油站&quot;, example: &quot;We need to stop at a petrol station soon.&quot; },
            { word: &quot;playground&quot;, phonetic: &quot;/ˈpleɪɡraʊnd/&quot;, meaning: &quot;游乐场&quot;, example: &quot;The school playground is full of children during break time.&quot; },
            { word: &quot;road&quot;, phonetic: &quot;/rəʊd/&quot;, meaning: &quot;道路&quot;, example: &quot;The road to the beach is very scenic.&quot; },
            { word: &quot;roundabout&quot;, phonetic: &quot;/ˈraʊndəbaʊt/&quot;, meaning: &quot;环岛&quot;, example: &quot;Take the second exit at the roundabout.&quot; },
            { word: &quot;square&quot;, phonetic: &quot;/skweə/&quot;, meaning: &quot;广场&quot;, example: &quot;The town square is decorated for the festival.&quot; },
            { word: &quot;station&quot;, phonetic: &quot;/ˈsteɪʃən/&quot;, meaning: &quot;车站&quot;, example: &quot;The train station is just five minutes away.&quot; },
            { word: &quot;street&quot;, phonetic: &quot;/striːt/&quot;, meaning: &quot;街道&quot;, example: &quot;Main Street is the busiest in our town.&quot; },
            { word: &quot;town&quot;, phonetic: &quot;/taʊn/&quot;, meaning: &quot;城镇&quot;, example: &quot;It&#x27;s a small town with a population of 10,000.&quot; },
            { word: &quot;underground&quot;, phonetic: &quot;/ˈʌndəɡraʊnd/&quot;, meaning: &quot;地铁&quot;, example: &quot;The underground is the fastest way to travel in the city.&quot; },
            { word: &quot;zoo&quot;, phonetic: &quot;/zuː/&quot;, meaning: &quot;动物园&quot;, example: &quot;We took the children to the zoo on Sunday.&quot; }
        ];

        // 学习状态变量
        let currentWordIndex = 0;
        let learnedWords = [];
        let wordsToReview = [];
        let allWords = [...wordData];
        
        // DOM 元素
        const wordCard = document.getElementById(&#x27;wordCard&#x27;);
        const currentWord = document.getElementById(&#x27;currentWord&#x27;);
        const phonetic = document.getElementById(&#x27;phonetic&#x27;);
        const meaning = document.getElementById(&#x27;meaning&#x27;);
        const example = document.getElementById(&#x27;example&#x27;);
        const pronounceBtn = document.getElementById(&#x27;pronounceBtn&#x27;);
        const btnKnow = document.getElementById(&#x27;btnKnow&#x27;);
        const btnDontKnow = document.getElementById(&#x27;btnDontKnow&#x27;);
        const btnUnsure = document.getElementById(&#x27;btnUnsure&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const learnedCount = document.getElementById(&#x27;learnedCount&#x27;);
        const reviewCount = document.getElementById(&#x27;reviewCount&#x27;);
        const totalCount = document.getElementById(&#x27;totalCount&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const restartBtn = document.getElementById(&#x27;restartBtn&#x27;);
        const completionMessage = document.getElementById(&#x27;completionMessage&#x27;);
        const subtitle = document.getElementById(&#x27;subtitle&#x27;);
        const completionText = document.getElementById(&#x27;completionText&#x27;);
        
        // 初始化
        function init() {
            shuffleArray(allWords);
            showWord();
            updateProgress();
            updateTotalCount();
        }
        
        // 更新总单词数
        function updateTotalCount() {
            totalCount.textContent = wordData.length;
            subtitle.textContent = `&quot;地点：城镇&quot; - ${wordData.length}个单词强化记忆`;
        }
        
        // 随机打乱数组
        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
        
        // 显示当前单词
        function showWord() {
            if (allWords.length === 0) {
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            const wordObj = allWords[currentWordIndex];
            currentWord.textContent = wordObj.word;
            phonetic.textContent = wordObj.phonetic;
            meaning.textContent = wordObj.meaning;
            example.textContent = wordObj.example;
            
            // 确保卡片正面朝上
            wordCard.classList.remove(&#x27;flipped&#x27;);
        }
        
        // 更新进度
        function updateProgress() {
            const totalWords = wordData.length;
            const learned = learnedWords.length;
            const progress = (learned / totalWords) * 100;
            
            progressBar.style.width = `${progress}%`;
            learnedCount.textContent = learned;
            reviewCount.textContent = wordsToReview.length;
        }
        
        // 播放发音
        function playPronunciation() {
            const word = allWords[currentWordIndex].word;
            const utterance = new SpeechSynthesisUtterance(word);
            utterance.lang = &#x27;en-GB&#x27;;
            utterance.rate = 0.9;
            utterance.pitch = 1;
            speechSynthesis.speak(utterance);
        }
        
        // 下一个单词
        function nextWord() {
            allWords.splice(currentWordIndex, 1);
            
            if (allWords.length &gt; 0) {
                currentWordIndex = Math.floor(Math.random() * allWords.length);
                showWord();
            } else {
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
            }
            
            updateProgress();
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 创建单词标签
            wordsToReview.forEach(wordObj =&gt; {
                const wordTag = document.createElement(&#x27;div&#x27;);
                wordTag.classList.add(&#x27;word-tag&#x27;);
                wordTag.textContent = wordObj.word;
                reviewWords.appendChild(wordTag);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completionMessage.style.display = &#x27;block&#x27;;
            completionText.textContent = `您已经掌握了所有${wordData.length}个地点单词！`;
        }
        
        // 事件监听器
        wordCard.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordCard.classList.toggle(&#x27;flipped&#x27;);
        });
        
        pronounceBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation();
            playPronunciation();
        });
        
        btnKnow.addEventListener(&#x27;click&#x27;, () =&gt; {
            learnedWords.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        btnDontKnow.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordsToReview.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        btnUnsure.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordsToReview.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        restartBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将需要复习的单词设为新的学习列表
            allWords = [...wordsToReview];
            wordsToReview = [];
            shuffleArray(allWords);
            currentWordIndex = 0;
            reviewSection.style.display = &#x27;none&#x27;;
            showWord();
            updateProgress();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="18公共服务系统" class="section">
      <div class="section-header">
        <h2>18公共服务系统</h2>
        <div class="section-actions">
          <button onclick="openStandalone('18公共服务系统.html')">打开原文件</button>
          <button onclick="toggleHeight('18公共服务系统')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;城市设施单词学习卡片&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #2c3e50, #1a1a2e);
            padding: 20px;
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            width: 100%;
            max-width: 900px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            padding: 30px;
            position: relative;
            border: 2px solid #ff6b6b;
        }
        
        .city-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.1;
            background-image: url(&#x27;data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;&lt;rect x=&quot;10&quot; y=&quot;40&quot; width=&quot;10&quot; height=&quot;40&quot; fill=&quot;%23ff6b6b&quot;/&gt;&lt;rect x=&quot;30&quot; y=&quot;20&quot; width=&quot;10&quot; height=&quot;60&quot; fill=&quot;%234ecdc4&quot;/&gt;&lt;rect x=&quot;50&quot; y=&quot;30&quot; width=&quot;10&quot; height=&quot;50&quot; fill=&quot;%23ffe66d&quot;/&gt;&lt;rect x=&quot;70&quot; y=&quot;10&quot; width=&quot;10&quot; height=&quot;70&quot; fill=&quot;%23ff6b6b&quot;/&gt;&lt;circle cx=&quot;25&quot; cy=&quot;85&quot; r=&quot;5&quot; fill=&quot;%234ecdc4&quot;/&gt;&lt;circle cx=&quot;75&quot; cy=&quot;85&quot; r=&quot;5&quot; fill=&quot;%234ecdc4&quot;/&gt;&lt;/svg&gt;&#x27;);
            background-size: 200px;
            z-index: 0;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }
        
        h1 {
            color: #fff;
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            letter-spacing: 1px;
            background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .subtitle {
            color: #ffe66d;
            font-size: 1.2rem;
            margin-top: 5px;
            font-weight: 500;
        }
        
        .progress-container {
            background-color: #1e2a38;
            border-radius: 10px;
            height: 20px;
            margin: 25px 0;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
            position: relative;
            z-index: 2;
            border: 1px solid #2c3e50;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
            border-radius: 10px;
            transition: width 0.4s ease;
            box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background-color: rgba(30, 42, 56, 0.8);
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            border: 1px solid #2c3e50;
        }
        
        .stat-box {
            text-align: center;
            padding: 10px;
            flex: 1;
        }
        
        .stat-box h3 {
            font-size: 1.8rem;
            color: #4ecdc4;
            margin-bottom: 5px;
            text-shadow: 0 0 10px rgba(78, 205, 196, 0.7);
        }
        
        .stat-box p {
            color: #ecf0f1;
            font-weight: 500;
        }
        
        /* 卡片容器 */
        .card-container {
            perspective: 1500px;
            height: 350px;
            margin: 30px 0;
            position: relative;
            z-index: 2;
        }
        
        .card {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            border-radius: 20px;
        }
        
        .card-front {
            background: linear-gradient(135deg, #1a2980, #ff6b6b);
            color: #fff;
            border: 3px solid #4ecdc4;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 20px rgba(78, 205, 196, 0.5);
        }
        
        .card-back {
            background: linear-gradient(135deg, #2c3e50, #1a1a2e);
            color: #fff;
            transform: rotateY(180deg);
            border: 3px solid #ff6b6b;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 20px rgba(255, 107, 107, 0.5);
        }
        
        .word {
            font-size: 4rem;
            font-weight: 700;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            margin-bottom: 15px;
            text-align: center;
            color: #fff;
        }
        
        .phonetic {
            font-size: 1.6rem;
            margin-bottom: 25px;
            color: rgba(255,255,255,0.9);
            font-style: italic;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        
        .meaning {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-align: center;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            color: #fff;
        }
        
        .example {
            font-size: 1.4rem;
            text-align: center;
            line-height: 1.6;
            max-width: 90%;
            font-style: italic;
            color: rgba(255,255,255,0.9);
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
            background: rgba(0,0,0,0.3);
            padding: 10px 20px;
            border-radius: 10px;
            border-left: 3px solid #ffe66d;
        }
        
        .pronounce-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            backdrop-filter: blur(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            margin-top: 15px;
            border: 2px solid #fff;
        }
        
        .pronounce-btn:hover {
            transform: scale(1.1);
            background: rgba(255,255,255,0.3);
            box-shadow: 0 0 20px rgba(255,255,255,0.5);
        }
        
        .pronounce-btn i {
            font-size: 30px;
            color: white;
        }
        
        .hint {
            position: absolute;
            bottom: 15px;
            color: rgba(255,255,255,0.8);
            font-size: 1rem;
            animation: pulse 2s infinite;
            background: rgba(0,0,0,0.3);
            padding: 5px 10px;
            border-radius: 20px;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        /* 按钮容器 */
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;
        }
        
        .btn {
            padding: 16px 40px;
            font-size: 1.3rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border: 2px solid rgba(255,255,255,0.3);
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.5);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-know {
            background: linear-gradient(to right, #4ecdc4, #1a936f);
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .btn-dont-know {
            background: linear-gradient(to right, #ff6b6b, #ff0000);
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .btn-unsure {
            background: linear-gradient(to right, #ffe66d, #ff9e00);
            color: #333;
            text-shadow: 0 1px 2px rgba(255,255,255,0.5);
        }
        
        .btn i {
            font-size: 1.4rem;
        }
        
        /* 复习模式 */
        .review-section {
            margin-top: 40px;
            padding: 25px;
            background: rgba(30, 42, 56, 0.8);
            border-radius: 15px;
            display: none;
            position: relative;
            z-index: 2;
            border: 1px solid #2c3e50;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .review-section h2 {
            text-align: center;
            color: #ff6b6b;
            margin-bottom: 20px;
            font-size: 1.8rem;
            text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .word-tag {
            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        .word-tag:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        
        .restart-btn {
            display: block;
            margin: 20px auto 0;
            padding: 15px 40px;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        .restart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.5);
        }
        
        .completion-message {
            text-align: center;
            padding: 40px;
            display: none;
            position: relative;
            z-index: 2;
            background: rgba(30, 42, 56, 0.8);
            border-radius: 20px;
            border: 1px solid #2c3e50;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .completion-message h2 {
            font-size: 3rem;
            color: #4ecdc4;
            margin-bottom: 20px;
            text-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
        }
        
        .completion-message p {
            font-size: 1.4rem;
            color: #ecf0f1;
            margin-bottom: 30px;
        }
        
        .fireworks {
            font-size: 4rem;
            animation: fireworks 1.5s infinite;
            display: inline-block;
            text-shadow: 0 0 10px #ff6b6b, 0 0 20px #4ecdc4;
        }
        
        @keyframes fireworks {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-20px) scale(1.2); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .word {
                font-size: 3rem;
            }
            
            .meaning {
                font-size: 2rem;
            }
            
            .btn {
                padding: 14px 30px;
                font-size: 1.1rem;
            }
            
            .card-container {
                height: 320px;
            }
        }
        
        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }
            
            .word {
                font-size: 2.2rem;
            }
            
            .meaning {
                font-size: 1.6rem;
            }
            
            .btn-container {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 15px;
                font-size: 0.9rem;
            }
            
            .card-container {
                height: 280px;
            }
            
            .example {
                font-size: 1.1rem;
            }
            
            .phonetic {
                font-size: 1.3rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;city-bg&quot;&gt;&lt;/div&gt;
        
        &lt;header&gt;
            &lt;h1&gt;城市设施单词学习卡片&lt;/h1&gt;
            &lt;p class=&quot;subtitle&quot; id=&quot;subtitle&quot;&gt;城市生活 · 17个常用设施单词&lt;/p&gt;
        &lt;/header&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;learnedCount&quot;&gt;0&lt;/h3&gt;
                &lt;p&gt;已掌握&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;reviewCount&quot;&gt;0&lt;/h3&gt;
                &lt;p&gt;需复习&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-box&quot;&gt;
                &lt;h3 id=&quot;totalCount&quot;&gt;17&lt;/h3&gt;
                &lt;p&gt;总单词&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;wordCard&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;currentWord&quot;&gt;bank&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/bæŋk/&lt;/div&gt;
                    &lt;button class=&quot;pronounce-btn&quot; id=&quot;pronounceBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片查看释义和例句&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;银行&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;I need to withdraw money from the bank.&lt;/div&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;btn-container&quot;&gt;
            &lt;button class=&quot;btn btn-know&quot; id=&quot;btnKnow&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn btn-dont-know&quot; id=&quot;btnDontKnow&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 我不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn btn-unsure&quot; id=&quot;btnUnsure&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 我不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;button class=&quot;restart-btn&quot; id=&quot;restartBtn&quot;&gt;
                &lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 重新学习这些单词
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completion-message&quot; id=&quot;completionMessage&quot;&gt;
            &lt;h2&gt;恭喜！ &lt;span class=&quot;fireworks&quot;&gt;🎉&lt;/span&gt;&lt;/h2&gt;
            &lt;p&gt;您已经掌握了所有17个城市设施单词！&lt;/p&gt;
            &lt;button class=&quot;restart-btn&quot; onclick=&quot;location.reload()&quot;&gt;
                &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新开始学习
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 单词数据 - 城市设施主题
        const wordData = [
            { word: &quot;bank&quot;, phonetic: &quot;/bæŋk/&quot;, meaning: &quot;银行&quot;, example: &quot;I need to withdraw money from the bank.&quot; },
            { word: &quot;cafe / café&quot;, phonetic: &quot;/ˈkæfeɪ/&quot;, meaning: &quot;咖啡馆&quot;, example: &quot;Let&#x27;s meet at the cafe for coffee tomorrow morning.&quot; },
            { word: &quot;cafeteria&quot;, phonetic: &quot;/ˌkæfɪˈtɪəriə/&quot;, meaning: &quot;自助餐厅&quot;, example: &quot;The school cafeteria serves lunch from 11:30 to 1:30.&quot; },
            { word: &quot;cinema&quot;, phonetic: &quot;/ˈsɪnəmə/&quot;, meaning: &quot;电影院&quot;, example: &quot;We&#x27;re going to the cinema to watch the new action movie.&quot; },
            { word: &quot;dentist&quot;, phonetic: &quot;/ˈdentɪst/&quot;, meaning: &quot;牙医&quot;, example: &quot;I have a dentist appointment at 3 PM today.&quot; },
            { word: &quot;doctor&quot;, phonetic: &quot;/ˈdɒktə/&quot;, meaning: &quot;医生&quot;, example: &quot;You should see a doctor if your fever doesn&#x27;t go down.&quot; },
            { word: &quot;garage&quot;, phonetic: &quot;/ˈɡærɑːʒ/&quot;, meaning: &quot;车库/修车厂&quot;, example: &quot;My car is in the garage for repairs.&quot; },
            { word: &quot;hotel&quot;, phonetic: &quot;/həʊˈtel/&quot;, meaning: &quot;酒店&quot;, example: &quot;We booked a hotel near the city center for our vacation.&quot; },
            { word: &quot;library&quot;, phonetic: &quot;/ˈlaɪbrəri/&quot;, meaning: &quot;图书馆&quot;, example: &quot;She spends every Saturday studying at the public library.&quot; },
            { word: &quot;museum&quot;, phonetic: &quot;/mjuːˈziːəm/&quot;, meaning: &quot;博物馆&quot;, example: &quot;The art museum has a new exhibition of modern paintings.&quot; },
            { word: &quot;petrol station&quot;, phonetic: &quot;/ˈpetrəl ˌsteɪʃən/&quot;, meaning: &quot;加油站&quot;, example: &quot;We need to stop at a petrol station before our road trip.&quot; },
            { word: &quot;post office&quot;, phonetic: &quot;/ˈpəʊst ˌɒfɪs/&quot;, meaning: &quot;邮局&quot;, example: &quot;I need to go to the post office to mail this package.&quot; },
            { word: &quot;restaurant&quot;, phonetic: &quot;/ˈrestrɒnt/&quot;, meaning: &quot;餐厅&quot;, example: &quot;They celebrated their anniversary at a fancy restaurant.&quot; },
            { word: &quot;sports centre&quot;, phonetic: &quot;/ˈspɔːts ˌsentə/&quot;, meaning: &quot;体育中心&quot;, example: &quot;The sports centre has a swimming pool and tennis courts.&quot; },
            { word: &quot;swimming pool&quot;, phonetic: &quot;/ˈswɪmɪŋ ˌpuːl/&quot;, meaning: &quot;游泳池&quot;, example: &quot;Children love playing in the swimming pool during summer.&quot; },
            { word: &quot;theatre&quot;, phonetic: &quot;/ˈθɪətə/&quot;, meaning: &quot;剧院&quot;, example: &quot;We have tickets for the musical at the theatre tonight.&quot; },
            { word: &quot;tourist information centre&quot;, phonetic: &quot;/ˈtʊərɪst ɪnfəˈmeɪʃən ˌsentə/&quot;, meaning: &quot;旅游信息中心&quot;, example: &quot;Get a city map at the tourist information centre.&quot; }
        ];

        // 学习状态变量
        let currentWordIndex = 0;
        let learnedWords = [];
        let wordsToReview = [];
        let allWords = [...wordData];
        
        // DOM 元素
        const wordCard = document.getElementById(&#x27;wordCard&#x27;);
        const currentWord = document.getElementById(&#x27;currentWord&#x27;);
        const phonetic = document.getElementById(&#x27;phonetic&#x27;);
        const meaning = document.getElementById(&#x27;meaning&#x27;);
        const example = document.getElementById(&#x27;example&#x27;);
        const pronounceBtn = document.getElementById(&#x27;pronounceBtn&#x27;);
        const btnKnow = document.getElementById(&#x27;btnKnow&#x27;);
        const btnDontKnow = document.getElementById(&#x27;btnDontKnow&#x27;);
        const btnUnsure = document.getElementById(&#x27;btnUnsure&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const learnedCount = document.getElementById(&#x27;learnedCount&#x27;);
        const reviewCount = document.getElementById(&#x27;reviewCount&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const restartBtn = document.getElementById(&#x27;restartBtn&#x27;);
        const completionMessage = document.getElementById(&#x27;completionMessage&#x27;);
        
        // 初始化
        function init() {
            shuffleArray(allWords);
            showWord();
            updateProgress();
        }
        
        // 随机打乱数组
        function shuffleArray(array) {
            for (let i = array.length - 1; i &gt; 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
        
        // 显示当前单词
        function showWord() {
            if (allWords.length === 0) {
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            const wordObj = allWords[currentWordIndex];
            currentWord.textContent = wordObj.word;
            phonetic.textContent = wordObj.phonetic;
            meaning.textContent = wordObj.meaning;
            example.textContent = wordObj.example;
            
            // 确保卡片正面朝上
            wordCard.classList.remove(&#x27;flipped&#x27;);
        }
        
        // 更新进度
        function updateProgress() {
            const totalWords = wordData.length;
            const learned = learnedWords.length;
            const progress = (learned / totalWords) * 100;
            
            progressBar.style.width = `${progress}%`;
            learnedCount.textContent = learned;
            reviewCount.textContent = wordsToReview.length;
        }
        
        // 播放发音
        function playPronunciation() {
            const word = allWords[currentWordIndex].word;
            // 对于有多个写法的单词，只取第一个部分发音
            const wordToSpeak = word.split(&#x27; / &#x27;)[0];
            const utterance = new SpeechSynthesisUtterance(wordToSpeak);
            utterance.lang = &#x27;en-GB&#x27;;
            utterance.rate = 0.9;
            utterance.pitch = 1;
            speechSynthesis.speak(utterance);
        }
        
        // 下一个单词
        function nextWord() {
            allWords.splice(currentWordIndex, 1);
            
            if (allWords.length &gt; 0) {
                currentWordIndex = Math.floor(Math.random() * allWords.length);
                showWord();
            } else {
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
            }
            
            updateProgress();
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 创建单词标签
            wordsToReview.forEach(wordObj =&gt; {
                const wordTag = document.createElement(&#x27;div&#x27;);
                wordTag.classList.add(&#x27;word-tag&#x27;);
                wordTag.textContent = wordObj.word;
                reviewWords.appendChild(wordTag);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completionMessage.style.display = &#x27;block&#x27;;
        }
        
        // 事件监听器
        wordCard.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordCard.classList.toggle(&#x27;flipped&#x27;);
        });
        
        pronounceBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation();
            playPronunciation();
        });
        
        btnKnow.addEventListener(&#x27;click&#x27;, () =&gt; {
            learnedWords.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        btnDontKnow.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordsToReview.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        btnUnsure.addEventListener(&#x27;click&#x27;, () =&gt; {
            wordsToReview.push(allWords[currentWordIndex]);
            nextWord();
        });
        
        restartBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将需要复习的单词设为新的学习列表
            allWords = [...wordsToReview];
            wordsToReview = [];
            shuffleArray(allWords);
            currentWordIndex = 0;
            reviewSection.style.display = &#x27;none&#x27;;
            showWord();
            updateProgress();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="19-购物" class="section">
      <div class="section-header">
        <h2>19 购物</h2>
        <div class="section-actions">
          <button onclick="openStandalone('19 购物.html')">打开原文件</button>
          <button onclick="toggleHeight('19-购物')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;英语单词闪卡学习系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .header {
            text-align: center;
            margin: 20px 0;
            color: white;
            width: 100%;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .header p {
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 800px;
        }
        
        /* 卡片容器 */
        .card-container {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1000px;
            margin: 20px 0;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s;
            cursor: pointer;
            box-shadow: 0 15px 35px rgba(0,0,0,0.25);
            border-radius: 20px;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            text-align: center;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
        }
        
        .card-back {
            background: linear-gradient(45deg, #fff9c4, #fff59d);
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.5rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .phonetic {
            font-size: 1.5rem;
            color: #7f8c8d;
            margin-bottom: 25px;
        }
        
        .meaning {
            font-size: 2.2rem;
            font-weight: bold;
            color: #d35400;
            margin-bottom: 20px;
        }
        
        .example {
            font-size: 1.4rem;
            color: #2c3e50;
            line-height: 1.6;
            font-style: italic;
            padding: 0 20px;
        }
        
        .sound-btn {
            background: #3498db;
            color: white;
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        .sound-btn:hover {
            background: #2980b9;
            transform: scale(1.05);
        }
        
        .sound-btn:active {
            transform: scale(0.95);
        }
        
        .hint {
            margin-top: 20px;
            color: #7f8c8d;
            font-size: 1rem;
        }
        
        /* 控制按钮 */
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .btn i {
            font-size: 1.3rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #2ecc71, #1abc9c);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        /* 进度条 */
        .progress-container {
            width: 100%;
            max-width: 500px;
            margin: 20px 0;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            height: 12px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #2ecc71, #3498db);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .progress-text {
            color: white;
            font-size: 1.1rem;
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        /* 复习模式 */
        .review-section {
            width: 100%;
            max-width: 700px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            display: none;
        }
        
        .review-section h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .review-word {
            background: #3498db;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .review-word:hover {
            background: #2980b9;
            transform: translateY(-3px);
        }
        
        .review-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .card-container {
                height: 300px;
            }
            
            .word {
                font-size: 2.8rem;
            }
            
            .meaning {
                font-size: 1.8rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1rem;
            }
        }
        
        @media (max-width: 480px) {
            .controls {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 15px;
            }
            
            .card-container {
                height: 280px;
            }
        }
        
        .flip-icon {
            position: absolute;
            bottom: 15px;
            right: 15px;
            color: #7f8c8d;
            font-size: 1.2rem;
        }
        
        .completed-message {
            text-align: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            margin: 50px 0;
            display: none;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #e74c3c;
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;notification&quot; id=&quot;notification&quot;&gt;发音功能需要网络连接&lt;/div&gt;
    
    &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;&lt;i class=&quot;fas fa-book&quot;&gt;&lt;/i&gt; 英语单词闪卡学习系统&lt;/h1&gt;
        &lt;p&gt;翻转卡片查看释义和例句 • 点击发音按钮听单词发音 • 使用下方按钮标记学习状态&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress-text&quot; id=&quot;progressText&quot;&gt;0/25 已学习&lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;advertisement&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ədˈvɜːtɪsmənt/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;soundBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;广告&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;I saw an advertisement for a new car in the newspaper.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;knowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dontKnowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsureBtn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completed-message&quot; id=&quot;completedMessage&quot;&gt;
            &lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜！您已完成所有单词学习！
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;p style=&quot;text-align: center; margin-bottom: 20px; color: #7f8c8d;&quot;&gt;
                以下是您标记为&quot;不认识&quot;或&quot;不确定&quot;的单词，请选择重新学习
            &lt;/p&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;review-buttons&quot;&gt;
                &lt;button class=&quot;btn know&quot; id=&quot;reviewBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-play&quot;&gt;&lt;/i&gt; 开始复习
                &lt;/button&gt;
                &lt;button class=&quot;btn dont-know&quot; id=&quot;resetBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新学习全部
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        // 单词数据
        const words = [
            {
                word: &quot;advertisement&quot;,
                phonetic: &quot;/ədˈvɜːtɪsmənt/&quot;,
                meaning: &quot;广告&quot;,
                example: &quot;I saw an advertisement for a new car in the newspaper.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/advertisement--_gb_1.mp3&quot;
            },
            {
                word: &quot;assistant&quot;,
                phonetic: &quot;/əˈsɪstənt/&quot;,
                meaning: &quot;助手&quot;,
                example: &quot;She works as a personal assistant to the CEO.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/assistant--_gb_1.mp3&quot;
            },
            {
                word: &quot;bill&quot;,
                phonetic: &quot;/bɪl/&quot;,
                meaning: &quot;账单&quot;,
                example: &quot;Could we have the bill, please?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bill--_gb_1.mp3&quot;
            },
            {
                word: &quot;bookshop&quot;,
                phonetic: &quot;/ˈbʊkʃɒp/&quot;,
                meaning: &quot;书店&quot;,
                example: &quot;I bought this novel at the local bookshop.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bookshop--_gb_1.mp3&quot;
            },
            {
                word: &quot;buy&quot;,
                phonetic: &quot;/baɪ/&quot;,
                meaning: &quot;购买&quot;,
                example: &quot;I need to buy some groceries for dinner.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/buy--_gb_1.mp3&quot;
            },
            {
                word: &quot;cash&quot;,
                phonetic: &quot;/kæʃ/&quot;,
                meaning: &quot;现金&quot;,
                example: &quot;Do you have enough cash for the tickets?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cash--_gb_1.mp3&quot;
            },
            {
                word: &quot;cent&quot;,
                phonetic: &quot;/sent/&quot;,
                meaning: &quot;分（货币单位）&quot;,
                example: &quot;The candy costs fifty cents.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cent--_gb_1.mp3&quot;
            },
            {
                word: &quot;change&quot;,
                phonetic: &quot;/tʃeɪndʒ/&quot;,
                meaning: &quot;零钱；改变&quot;,
                example: &quot;Keep the change.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/change--_gb_1.mp3&quot;
            },
            {
                word: &quot;cheap&quot;,
                phonetic: &quot;/tʃiːp/&quot;,
                meaning: &quot;便宜的&quot;,
                example: &quot;This store sells cheap but good quality clothes.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cheap--_gb_1.mp3&quot;
            },
            {
                word: &quot;cheque&quot;,
                phonetic: &quot;/tʃek/&quot;,
                meaning: &quot;支票&quot;,
                example: &quot;I&#x27;ll pay by cheque.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cheque--_gb_1.mp3&quot;
            },
            {
                word: &quot;close&quot;,
                phonetic: &quot;/kləʊz/&quot;,
                meaning: &quot;关闭&quot;,
                example: &quot;Please close the door when you leave.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/close--_gb_1.mp3&quot;
            },
            {
                word: &quot;closed&quot;,
                phonetic: &quot;/kləʊzd/&quot;,
                meaning: &quot;关闭的&quot;,
                example: &quot;The shop is closed on Sundays.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/closed--_gb_1.mp3&quot;
            },
            {
                word: &quot;cost&quot;,
                phonetic: &quot;/kɒst/&quot;,
                meaning: &quot;花费；成本&quot;,
                example: &quot;How much does this jacket cost?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cost--_gb_1.mp3&quot;
            },
            {
                word: &quot;credit card&quot;,
                phonetic: &quot;/ˈkredɪt kɑːd/&quot;,
                meaning: &quot;信用卡&quot;,
                example: &quot;Can I pay with a credit card?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/credit_card--_gb_1.mp3&quot;
            },
            {
                word: &quot;customer&quot;,
                phonetic: &quot;/ˈkʌstəmə(r)/&quot;,
                meaning: &quot;顾客&quot;,
                example: &quot;The customer is always right.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/customer--_gb_1.mp3&quot;
            },
            {
                word: &quot;department store&quot;,
                phonetic: &quot;/dɪˈpɑːtmənt stɔː(r)/&quot;,
                meaning: &quot;百货商店&quot;,
                example: &quot;We went shopping at the new department store.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/department_store--_gb_1.mp3&quot;
            },
            {
                word: &quot;dollar&quot;,
                phonetic: &quot;/ˈdɒlə(r)/&quot;,
                meaning: &quot;美元&quot;,
                example: &quot;This costs twenty dollars.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/dollar--_gb_1.mp3&quot;
            },
            {
                word: &quot;euro&quot;,
                phonetic: &quot;/ˈjʊərəʊ/&quot;,
                meaning: &quot;欧元&quot;,
                example: &quot;The price is fifteen euros.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/euro--_gb_1.mp3&quot;
            },
            {
                word: &quot;expensive&quot;,
                phonetic: &quot;/ɪkˈspensɪv/&quot;,
                meaning: &quot;昂贵的&quot;,
                example: &quot;That restaurant is too expensive for me.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/expensive--_gb_1.mp3&quot;
            },
            {
                word: &quot;for sale&quot;,
                phonetic: &quot;/fə(r) seɪl/&quot;,
                meaning: &quot;待售&quot;,
                example: &quot;The house is for sale.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/for_sale--_gb_1.mp3&quot;
            },
            {
                word: &quot;go shopping&quot;,
                phonetic: &quot;/ɡəʊ ˈʃɒpɪŋ/&quot;,
                meaning: &quot;去购物&quot;,
                example: &quot;I need to go shopping for groceries.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/go_shopping--_gb_1.mp3&quot;
            },
            {
                word: &quot;open&quot;,
                phonetic: &quot;/ˈəʊpən/&quot;,
                meaning: &quot;打开；营业中的&quot;,
                example: &quot;What time does the bank open?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/open--_gb_1.mp3&quot;
            },
            {
                word: &quot;pay&quot;,
                phonetic: &quot;/peɪ/&quot;,
                meaning: &quot;支付&quot;,
                example: &quot;You can pay by cash or card.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/pay--_gb_1.mp3&quot;
            },
            {
                word: &quot;penny&quot;,
                phonetic: &quot;/ˈpeni/&quot;,
                meaning: &quot;便士&quot;,
                example: &quot;I found a penny on the street.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/penny--_gb_1.mp3&quot;
            },
            {
                word: &quot;pound&quot;,
                phonetic: &quot;/paʊnd/&quot;,
                meaning: &quot;英镑&quot;,
                example: &quot;It costs ten pounds.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/pound--_gb_1.mp3&quot;
            },
            {
                word: &quot;price&quot;,
                phonetic: &quot;/praɪs/&quot;,
                meaning: &quot;价格&quot;,
                example: &quot;What&#x27;s the price of this phone?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/price--_gb_1.mp3&quot;
            },
            {
                word: &quot;receipt&quot;,
                phonetic: &quot;/rɪˈsiːt/&quot;,
                meaning: &quot;收据&quot;,
                example: &quot;Can I have a receipt, please?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/receipt--_gb_1.mp3&quot;
            },
            {
                word: &quot;rent&quot;,
                phonetic: &quot;/rent/&quot;,
                meaning: &quot;租金；租用&quot;,
                example: &quot;How much is the rent for this apartment?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/rent--_gb_1.mp3&quot;
            },
            {
                word: &quot;sale&quot;,
                phonetic: &quot;/seɪl/&quot;,
                meaning: &quot;销售；特价&quot;,
                example: &quot;There&#x27;s a big sale at the mall this weekend.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sale--_gb_1.mp3&quot;
            },
            {
                word: &quot;shop&quot;,
                phonetic: &quot;/ʃɒp/&quot;,
                meaning: &quot;商店；购物&quot;,
                example: &quot;I need to shop for new shoes.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/shop--_gb_1.mp3&quot;
            },
            {
                word: &quot;shop assistant&quot;,
                phonetic: &quot;/ˈʃɒp əˌsɪstənt/&quot;,
                meaning: &quot;店员&quot;,
                example: &quot;The shop assistant helped me find the right size.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/shop_assistant--_gb_1.mp3&quot;
            },
            {
                word: &quot;shopper&quot;,
                phonetic: &quot;/ˈʃɒpə(r)/&quot;,
                meaning: &quot;购物者&quot;,
                example: &quot;The store was full of shoppers.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/shopper--_gb_1.mp3&quot;
            },
            {
                word: &quot;shopping&quot;,
                phonetic: &quot;/ˈʃɒpɪŋ/&quot;,
                meaning: &quot;购物&quot;,
                example: &quot;I enjoy weekend shopping.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/shopping--_gb_1.mp3&quot;
            },
            {
                word: &quot;spend&quot;,
                phonetic: &quot;/spend/&quot;,
                meaning: &quot;花费（时间/金钱）&quot;,
                example: &quot;I spend too much money on clothes.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/spend--_gb_1.mp3&quot;
            },
            {
                word: &quot;store&quot;,
                phonetic: &quot;/stɔː(r)/&quot;,
                meaning: &quot;商店&quot;,
                example: &quot;There&#x27;s a convenience store on the corner.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/store--_gb_1.mp3&quot;
            },
            {
                word: &quot;supermarket&quot;,
                phonetic: &quot;/ˈsuːpəmɑːkɪt/&quot;,
                meaning: &quot;超市&quot;,
                example: &quot;We buy most of our food at the supermarket.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/supermarket--_gb_1.mp3&quot;
            },
            {
                word: &quot;try on&quot;,
                phonetic: &quot;/traɪ ɒn/&quot;,
                meaning: &quot;试穿&quot;,
                example: &quot;Can I try on these jeans?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/try_on--_gb_1.mp3&quot;
            }
        ];
        
        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;soundBtn&#x27;);
        const knowBtn = document.getElementById(&#x27;knowBtn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dontKnowBtn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsureBtn&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const progressText = document.getElementById(&#x27;progressText&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const reviewBtn = document.getElementById(&#x27;reviewBtn&#x27;);
        const resetBtn = document.getElementById(&#x27;resetBtn&#x27;);
        const completedMessage = document.getElementById(&#x27;completedMessage&#x27;);
        const notification = document.getElementById(&#x27;notification&#x27;);
        
        // 应用状态
        let learnedWords = [];
        let wordsToReview = [];
        let currentWordIndex = -1;
        let remainingWords = [...words];
        let audio = new Audio();
        
        // 初始化应用
        function init() {
            // 重置状态
            learnedWords = [];
            wordsToReview = [];
            remainingWords = [...words];
            
            // 更新UI
            reviewSection.style.display = &#x27;none&#x27;;
            completedMessage.style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            updateProgress();
            
            // 显示第一个单词
            nextWord();
        }
        
        // 显示下一个单词
        function nextWord() {
            if (remainingWords.length === 0) {
                // 所有单词都学完了
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            // 随机选择一个单词
            currentWordIndex = Math.floor(Math.random() * remainingWords.length);
            const word = remainingWords[currentWordIndex];
            
            // 更新卡片内容
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = `&quot;${word.example}&quot;`;
            
            // 确保卡片显示正面
            card.classList.remove(&#x27;flipped&#x27;);
            
            // 更新进度
            updateProgress();
        }
        
        // 更新进度条
        function updateProgress() {
            const learnedCount = words.length - remainingWords.length;
            const progress = (learnedCount / words.length) * 100;
            
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${learnedCount}/${words.length} 已学习`;
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            
            // 清空之前的复习单词
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 添加需要复习的单词
            wordsToReview.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.dataset.word = word.word;
                reviewWords.appendChild(wordEl);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completedMessage.style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;none&#x27;;
        }
        
        // 发音函数 - 使用预加载的MP3
        function speakWord() {
            const word = remainingWords[currentWordIndex];
            
            if (word.audio) {
                audio.src = word.audio;
                audio.play().catch(e =&gt; {
                    console.error(&quot;发音错误:&quot;, e);
                    showNotification();
                });
            } else {
                showNotification();
            }
        }
        
        // 显示通知
        function showNotification() {
            notification.textContent = &quot;发音功能需要网络连接&quot;;
            notification.style.display = &#x27;block&#x27;;
            notification.style.background = &#x27;#e74c3c&#x27;;
            
            setTimeout(() =&gt; {
                notification.style.display = &#x27;none&#x27;;
            }, 3000);
        }
        
        // 事件监听器
        card.addEventListener(&#x27;click&#x27;, () =&gt; {
            card.classList.toggle(&#x27;flipped&#x27;);
        });
        
        soundBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        reviewBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将复习单词设置为剩余单词
            remainingWords = [...wordsToReview];
            wordsToReview = [];
            
            // 隐藏复习部分
            reviewSection.style.display = &#x27;none&#x27;;
            
            // 开始复习
            nextWord();
        });
        
        resetBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 重新初始化应用
            init();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="20-体育" class="section">
      <div class="section-header">
        <h2>20 体育</h2>
        <div class="section-actions">
          <button onclick="openStandalone('20 体育.html')">打开原文件</button>
          <button onclick="toggleHeight('20-体育')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;体育与运动主题单词闪卡&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .header {
            text-align: center;
            margin: 20px 0;
            color: white;
            width: 100%;
            padding: 10px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 15px;
            display: inline-block;
        }
        
        .header p {
            font-size: 1.1rem;
            max-width: 600px;
            margin: 15px auto 0;
            line-height: 1.6;
            color: #f8f9fa;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 800px;
        }
        
        /* 卡片容器 */
        .card-container {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1000px;
            margin: 20px 0;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            border-radius: 20px;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            text-align: center;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 3px solid #1a2a6c;
        }
        
        .card-back {
            background: linear-gradient(45deg, #fff9c4, #fff59d);
            transform: rotateY(180deg);
            border: 3px solid #b21f1f;
        }
        
        .word {
            font-size: 3.2rem;
            font-weight: bold;
            color: #1a2a6c;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .phonetic {
            font-size: 1.4rem;
            color: #6c757d;
            margin-bottom: 25px;
        }
        
        .meaning {
            font-size: 2.2rem;
            font-weight: bold;
            color: #d35400;
            margin-bottom: 20px;
        }
        
        .example {
            font-size: 1.4rem;
            color: #2c3e50;
            line-height: 1.6;
            font-style: italic;
            padding: 0 20px;
        }
        
        .sports-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: #1a2a6c;
        }
        
        .sound-btn {
            background: #3498db;
            color: white;
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        
        .sound-btn:hover {
            background: #2980b9;
            transform: scale(1.05);
        }
        
        .sound-btn:active {
            transform: scale(0.95);
        }
        
        .hint {
            margin-top: 20px;
            color: #6c757d;
            font-size: 1rem;
            position: absolute;
            bottom: 20px;
        }
        
        /* 控制按钮 */
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            min-width: 150px;
            justify-content: center;
        }
        
        .btn i {
            font-size: 1.3rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #2ecc71, #1abc9c);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        /* 进度条 */
        .progress-container {
            width: 100%;
            max-width: 500px;
            margin: 20px 0;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            height: 12px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #2ecc71, #3498db);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .progress-text {
            color: white;
            font-size: 1.1rem;
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        /* 复习模式 */
        .review-section {
            width: 100%;
            max-width: 700px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            display: none;
        }
        
        .review-section h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .review-word {
            background: #3498db;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .review-word:hover {
            background: #2980b9;
            transform: translateY(-3px);
        }
        
        .review-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .card-container {
                height: 320px;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .meaning {
                font-size: 1.8rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1rem;
                min-width: 120px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .controls {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 15px;
                min-width: 100px;
            }
            
            .card-container {
                height: 300px;
            }
            
            .word {
                font-size: 2.2rem;
            }
            
            .sports-icon {
                font-size: 2.8rem;
            }
        }
        
        .flip-icon {
            position: absolute;
            bottom: 15px;
            right: 15px;
            color: #6c757d;
            font-size: 1.2rem;
        }
        
        .completed-message {
            text-align: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            margin: 50px 0;
            display: none;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 30px;
            border-radius: 20px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #e74c3c;
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
        }
        
        .category-tag {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #1a2a6c;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;notification&quot; id=&quot;notification&quot;&gt;发音功能需要网络连接&lt;/div&gt;
    
    &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;&lt;i class=&quot;fas fa-running&quot;&gt;&lt;/i&gt; 体育与运动主题单词闪卡&lt;/h1&gt;
        &lt;p&gt;学习体育相关词汇 • 点击卡片翻转查看释义 • 使用下方按钮标记学习状态&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress-text&quot; id=&quot;progressText&quot;&gt;0/68 已学习&lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;category-tag&quot;&gt;运动项目&lt;/div&gt;
                    &lt;div class=&quot;sports-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-baseball-ball&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;baseball&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈbeɪs.bɔːl/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;soundBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;棒球&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;He plays baseball every weekend with his friends.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;knowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dontKnowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsureBtn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completed-message&quot; id=&quot;completedMessage&quot;&gt;
            &lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜！您已完成所有单词学习！
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;p style=&quot;text-align: center; margin-bottom: 20px; color: #6c757d;&quot;&gt;
                以下是您标记为&quot;不认识&quot;或&quot;不确定&quot;的单词，请选择重新学习
            &lt;/p&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;review-buttons&quot;&gt;
                &lt;button class=&quot;btn know&quot; id=&quot;reviewBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-play&quot;&gt;&lt;/i&gt; 开始复习
                &lt;/button&gt;
                &lt;button class=&quot;btn dont-know&quot; id=&quot;resetBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新学习全部
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        // 单词数据 - 体育与运动主题
        const words = [
            {
                word: &quot;ball&quot;,
                phonetic: &quot;/bɔːl/&quot;,
                meaning: &quot;球&quot;,
                example: &quot;The children were playing with a ball in the park.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ball--_gb_1.mp3&quot;,
                icon: &quot;fa-futbol&quot;
            },
            {
                word: &quot;badminton&quot;,
                phonetic: &quot;/ˈbæd.mɪn.tən/&quot;,
                meaning: &quot;羽毛球&quot;,
                example: &quot;She won the badminton championship last year.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/badminton--_gb_1.mp3&quot;,
                icon: &quot;fa-table-tennis&quot;
            },
            {
                word: &quot;baseball&quot;,
                phonetic: &quot;/ˈbeɪs.bɔːl/&quot;,
                meaning: &quot;棒球&quot;,
                example: &quot;He plays baseball every weekend with his friends.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/baseball--_gb_1.mp3&quot;,
                icon: &quot;fa-baseball-ball&quot;
            },
            {
                word: &quot;basketball&quot;,
                phonetic: &quot;/ˈbɑː.skɪt.bɔːl/&quot;,
                meaning: &quot;篮球&quot;,
                example: &quot;The school basketball team won the regional competition.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/basketball--_gb_1.mp3&quot;,
                icon: &quot;fa-basketball-ball&quot;
            },
            {
                word: &quot;bat&quot;,
                phonetic: &quot;/bæt/&quot;,
                meaning: &quot;球棒&quot;,
                example: &quot;He swung the bat and hit a home run.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bat--_gb_1.mp3&quot;,
                icon: &quot;fa-baseball-ball&quot;
            },
            {
                word: &quot;bathing suit&quot;,
                phonetic: &quot;/ˈbeɪ.ðɪŋ ˌsuːt/&quot;,
                meaning: &quot;泳衣&quot;,
                example: &quot;She bought a new bathing suit for her vacation.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/swimsuit--_gb_1.mp3&quot;,
                icon: &quot;fa-swimmer&quot;
            },
            {
                word: &quot;beach&quot;,
                phonetic: &quot;/biːtʃ/&quot;,
                meaning: &quot;海滩&quot;,
                example: &quot;We spent the day at the beach playing volleyball.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/beach--_gb_1.mp3&quot;,
                icon: &quot;fa-umbrella-beach&quot;
            },
            {
                word: &quot;bicycle&quot;,
                phonetic: &quot;/ˈbaɪ.sɪ.kəl/&quot;,
                meaning: &quot;自行车&quot;,
                example: &quot;He rides his bicycle to work every day.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bicycle--_gb_1.mp3&quot;,
                icon: &quot;fa-bicycle&quot;
            },
            {
                word: &quot;bike&quot;,
                phonetic: &quot;/baɪk/&quot;,
                meaning: &quot;自行车；摩托车&quot;,
                example: &quot;She bought a new mountain bike for her birthday.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bike--_gb_1.mp3&quot;,
                icon: &quot;fa-bicycle&quot;
            },
            {
                word: &quot;boat&quot;,
                phonetic: &quot;/bəʊt/&quot;,
                meaning: &quot;船&quot;,
                example: &quot;They went sailing in a small boat.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/boat--_gb_1.mp3&quot;,
                icon: &quot;fa-ship&quot;
            },
            {
                word: &quot;catch&quot;,
                phonetic: &quot;/kætʃ/&quot;,
                meaning: &quot;接住&quot;,
                example: &quot;The player managed to catch the ball before it hit the ground.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/catch--_gb_1.mp3&quot;,
                icon: &quot;fa-baseball-ball&quot;
            },
            {
                word: &quot;climb&quot;,
                phonetic: &quot;/klaɪm/&quot;,
                meaning: &quot;攀登&quot;,
                example: &quot;She loves to climb mountains during the summer.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/climb--_gb_1.mp3&quot;,
                icon: &quot;fa-mountain&quot;
            },
            {
                word: &quot;club&quot;,
                phonetic: &quot;/klʌb/&quot;,
                meaning: &quot;俱乐部；球杆&quot;,
                example: &quot;He joined the tennis club last month.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/club--_gb_1.mp3&quot;,
                icon: &quot;fa-golf-ball&quot;
            },
            {
                word: &quot;coach&quot;,
                phonetic: &quot;/kəʊtʃ/&quot;,
                meaning: &quot;教练&quot;,
                example: &quot;The football coach trained the team every afternoon.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/coach--_gb_1.mp3&quot;,
                icon: &quot;fa-whistle&quot;
            },
            {
                word: &quot;competition&quot;,
                phonetic: &quot;/ˌkɒm.pəˈtɪʃ.ən/&quot;,
                meaning: &quot;比赛&quot;,
                example: &quot;She entered the swimming competition and won first place.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/competition--_gb_1.mp3&quot;,
                icon: &quot;fa-trophy&quot;
            },
            {
                word: &quot;cricket&quot;,
                phonetic: &quot;/ˈkrɪk.ɪt/&quot;,
                meaning: &quot;板球&quot;,
                example: &quot;Cricket is very popular in England and Australia.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cricket--_gb_1.mp3&quot;,
                icon: &quot;fa-baseball-ball&quot;
            },
            {
                word: &quot;cycling&quot;,
                phonetic: &quot;/ˈsaɪ.klɪŋ/&quot;,
                meaning: &quot;骑自行车运动&quot;,
                example: &quot;Cycling is a great way to stay fit and healthy.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cycling--_gb_1.mp3&quot;,
                icon: &quot;fa-bicycle&quot;
            },
            {
                word: &quot;enter&quot;,
                phonetic: &quot;/ˈen.tər/&quot;,
                meaning: &quot;参加（比赛）&quot;,
                example: &quot;He decided to enter the marathon next month.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/enter--_gb_1.mp3&quot;,
                icon: &quot;fa-flag-checkered&quot;
            },
            {
                word: &quot;equipment&quot;,
                phonetic: &quot;/ɪˈkwɪp.mənt/&quot;,
                meaning: &quot;装备&quot;,
                example: &quot;The gym has all the latest exercise equipment.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/equipment--_gb_1.mp3&quot;,
                icon: &quot;fa-dumbbell&quot;
            },
            {
                word: &quot;exercise&quot;,
                phonetic: &quot;/ˈek.sə.saɪz/&quot;,
                meaning: &quot;锻炼；练习&quot;,
                example: &quot;Regular exercise is important for good health.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/exercise--_gb_1.mp3&quot;,
                icon: &quot;fa-running&quot;
            },
            {
                word: &quot;fishing&quot;,
                phonetic: &quot;/ˈfɪʃ.ɪŋ/&quot;,
                meaning: &quot;钓鱼&quot;,
                example: &quot;They went fishing at the lake early in the morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/fishing--_gb_1.mp3&quot;,
                icon: &quot;fa-fish&quot;
            },
            {
                word: &quot;football&quot;,
                phonetic: &quot;/ˈfʊt.bɔːl/&quot;,
                meaning: &quot;足球&quot;,
                example: &quot;The whole city celebrated when their football team won the championship.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/football--_gb_1.mp3&quot;,
                icon: &quot;fa-futbol&quot;
            },
            {
                word: &quot;football player&quot;,
                phonetic: &quot;/ˈfʊt.bɔːl ˌpleɪ.ər/&quot;,
                meaning: &quot;足球运动员&quot;,
                example: &quot;He dreams of becoming a professional football player.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/footballer--_gb_1.mp3&quot;,
                icon: &quot;fa-user-alt&quot;
            },
            {
                word: &quot;game&quot;,
                phonetic: &quot;/ɡeɪm/&quot;,
                meaning: &quot;比赛；游戏&quot;,
                example: &quot;The basketball game starts at 7 PM tonight.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/game--_gb_1.mp3&quot;,
                icon: &quot;fa-gamepad&quot;
            },
            {
                word: &quot;goal&quot;,
                phonetic: &quot;/ɡəʊl/&quot;,
                meaning: &quot;进球；球门；目标&quot;,
                example: &quot;He scored the winning goal in the last minute of the game.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/goal--_gb_1.mp3&quot;,
                icon: &quot;fa-futbol&quot;
            },
            {
                word: &quot;golf&quot;,
                phonetic: &quot;/ɡɒlf/&quot;,
                meaning: &quot;高尔夫&quot;,
                example: &quot;They play golf every Saturday morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/golf--_gb_1.mp3&quot;,
                icon: &quot;fa-golf-ball&quot;
            },
            {
                word: &quot;gym&quot;,
                phonetic: &quot;/dʒɪm/&quot;,
                meaning: &quot;健身房&quot;,
                example: &quot;She goes to the gym three times a week.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/gym--_gb_1.mp3&quot;,
                icon: &quot;fa-dumbbell&quot;
            },
            {
                word: &quot;hockey&quot;,
                phonetic: &quot;/ˈhɒk.i/&quot;,
                meaning: &quot;曲棍球&quot;,
                example: &quot;Ice hockey is very popular in Canada.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/hockey--_gb_1.mp3&quot;,
                icon: &quot;fa-hockey-puck&quot;
            },
            {
                word: &quot;keep fit&quot;,
                phonetic: &quot;/ˌkiːp ˈfɪt/&quot;,
                meaning: &quot;保持健康&quot;,
                example: &quot;Swimming is a great way to keep fit.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/fitness--_gb_1.mp3&quot;,
                icon: &quot;fa-heartbeat&quot;
            },
            {
                word: &quot;kit&quot;,
                phonetic: &quot;/kɪt/&quot;,
                meaning: &quot;装备&quot;,
                example: &quot;The football team wore their new kit for the match.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/kit--_gb_1.mp3&quot;,
                icon: &quot;fa-tshirt&quot;
            },
            {
                word: &quot;luck&quot;,
                phonetic: &quot;/lʌk/&quot;,
                meaning: &quot;运气&quot;,
                example: &quot;Good luck in your race tomorrow!&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/luck--_gb_1.mp3&quot;,
                icon: &quot;fa-clover&quot;
            },
            {
                word: &quot;member&quot;,
                phonetic: &quot;/ˈmem.bər/&quot;,
                meaning: &quot;成员&quot;,
                example: &quot;She has been a member of the tennis club for five years.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/member--_gb_1.mp3&quot;,
                icon: &quot;fa-user-friends&quot;
            },
            {
                word: &quot;play&quot;,
                phonetic: &quot;/pleɪ/&quot;,
                meaning: &quot;玩；参加（运动）&quot;,
                example: &quot;The children play football in the park after school.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/play--_gb_1.mp3&quot;,
                icon: &quot;fa-play-circle&quot;
            },
            {
                word: &quot;player&quot;,
                phonetic: &quot;/ˈpleɪ.ər/&quot;,
                meaning: &quot;运动员&quot;,
                example: &quot;He is the best player on the basketball team.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/player--_gb_1.mp3&quot;,
                icon: &quot;fa-user-alt&quot;
            },
            {
                word: &quot;pool&quot;,
                phonetic: &quot;/puːl/&quot;,
                meaning: &quot;游泳池&quot;,
                example: &quot;The hotel has a large swimming pool.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/pool--_gb_1.mp3&quot;,
                icon: &quot;fa-swimming-pool&quot;
            },
            {
                word: &quot;practice&quot;,
                phonetic: &quot;/ˈpræk.tɪs/&quot;,
                meaning: &quot;练习&quot;,
                example: &quot;The team has practice every Tuesday and Thursday.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/practice--_gb_1.mp3&quot;,
                icon: &quot;fa-dumbbell&quot;
            },
            {
                word: &quot;practise&quot;,
                phonetic: &quot;/ˈpræk.tɪs/&quot;,
                meaning: &quot;练习&quot;,
                example: &quot;You need to practise every day to improve.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/practise--_gb_1.mp3&quot;,
                icon: &quot;fa-repeat&quot;
            },
            {
                word: &quot;prize&quot;,
                phonetic: &quot;/praɪz/&quot;,
                meaning: &quot;奖品&quot;,
                example: &quot;The winner received a cash prize of $10,000.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/prize--_gb_1.mp3&quot;,
                icon: &quot;fa-medal&quot;
            },
            {
                word: &quot;race&quot;,
                phonetic: &quot;/reɪs/&quot;,
                meaning: &quot;比赛；赛跑&quot;,
                example: &quot;She won the 100-meter race at the school sports day.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/race--_gb_1.mp3&quot;,
                icon: &quot;fa-running&quot;
            },
            {
                word: &quot;racket&quot;,
                phonetic: &quot;/ˈræk.ɪt/&quot;,
                meaning: &quot;球拍&quot;,
                example: &quot;She bought a new tennis racket for the tournament.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/racket--_gb_1.mp3&quot;,
                icon: &quot;fa-table-tennis&quot;
            },
            {
                word: &quot;rest&quot;,
                phonetic: &quot;/rest/&quot;,
                meaning: &quot;休息&quot;,
                example: &quot;The players rested for 15 minutes at half-time.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/rest--_gb_1.mp3&quot;,
                icon: &quot;fa-couch&quot;
            },
            {
                word: &quot;ride&quot;,
                phonetic: &quot;/raɪd/&quot;,
                meaning: &quot;骑；乘坐&quot;,
                example: &quot;They went for a bike ride in the countryside.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ride--_gb_1.mp3&quot;,
                icon: &quot;fa-bicycle&quot;
            },
            {
                word: &quot;riding&quot;,
                phonetic: &quot;/ˈraɪ.dɪŋ/&quot;,
                meaning: &quot;骑马&quot;,
                example: &quot;She goes horse riding every weekend.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/riding--_gb_1.mp3&quot;,
                icon: &quot;fa-horse&quot;
            },
            {
                word: &quot;rugby&quot;,
                phonetic: &quot;/ˈrʌɡ.bi/&quot;,
                meaning: &quot;橄榄球&quot;,
                example: &quot;Rugby is a popular sport in many countries.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/rugby--_gb_1.mp3&quot;,
                icon: &quot;fa-football-ball&quot;
            },
            {
                word: &quot;run&quot;,
                phonetic: &quot;/rʌn/&quot;,
                meaning: &quot;跑&quot;,
                example: &quot;He runs five kilometers every morning before work.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/run--_gb_1.mp3&quot;,
                icon: &quot;fa-running&quot;
            },
            {
                word: &quot;sailing&quot;,
                phonetic: &quot;/ˈseɪ.lɪŋ/&quot;,
                meaning: &quot;帆船运动&quot;,
                example: &quot;They enjoy sailing on the lake during summer weekends.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sailing--_gb_1.mp3&quot;,
                icon: &quot;fa-ship&quot;
            },
            {
                word: &quot;sea&quot;,
                phonetic: &quot;/siː/&quot;,
                meaning: &quot;海&quot;,
                example: &quot;We swam in the sea every day during our vacation.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sea--_gb_1.mp3&quot;,
                icon: &quot;fa-water&quot;
            },
            {
                word: &quot;skate&quot;,
                phonetic: &quot;/skeɪt/&quot;,
                meaning: &quot;滑冰&quot;,
                example: &quot;Children love to skate on the frozen pond in winter.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/skate--_gb_1.mp3&quot;,
                icon: &quot;fa-skating&quot;
            },
            {
                word: &quot;skateboard&quot;,
                phonetic: &quot;/ˈskeɪt.bɔːd/&quot;,
                meaning: &quot;滑板&quot;,
                example: &quot;He does tricks on his skateboard at the skate park.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/skateboard--_gb_1.mp3&quot;,
                icon: &quot;fa-skating&quot;
            },
            {
                word: &quot;ski&quot;,
                phonetic: &quot;/skiː/&quot;,
                meaning: &quot;滑雪&quot;,
                example: &quot;They go to the mountains every winter to ski.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ski--_gb_1.mp3&quot;,
                icon: &quot;fa-skiing&quot;
            },
            {
                word: &quot;skiing&quot;,
                phonetic: &quot;/ˈskiː.ɪŋ/&quot;,
                meaning: &quot;滑雪运动&quot;,
                example: &quot;Skiing is his favorite winter sport.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/skiing--_gb_1.mp3&quot;,
                icon: &quot;fa-skiing&quot;
            },
            {
                word: &quot;snowboard&quot;,
                phonetic: &quot;/ˈsnəʊ.bɔːd/&quot;,
                meaning: &quot;滑雪板&quot;,
                example: &quot;He bought a new snowboard for his trip to the Alps.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/snowboard--_gb_1.mp3&quot;,
                icon: &quot;fa-snowboarding&quot;
            },
            {
                word: &quot;snowboarding&quot;,
                phonetic: &quot;/ˈsnəʊ.bɔː.dɪŋ/&quot;,
                meaning: &quot;单板滑雪&quot;,
                example: &quot;Snowboarding is more difficult than skiing for beginners.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/snowboarding--_gb_1.mp3&quot;,
                icon: &quot;fa-snowboarding&quot;
            },
            {
                word: &quot;soccer&quot;,
                phonetic: &quot;/ˈsɒk.ər/&quot;,
                meaning: &quot;足球&quot;,
                example: &quot;Soccer is called football in most countries.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/soccer--_gb_1.mp3&quot;,
                icon: &quot;fa-futbol&quot;
            },
            {
                word: &quot;sport(s)&quot;,
                phonetic: &quot;/spɔːt/&quot;,
                meaning: &quot;运动&quot;,
                example: &quot;Playing sports is a good way to stay healthy.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sport--_gb_1.mp3&quot;,
                icon: &quot;fa-football-ball&quot;
            },
            {
                word: &quot;sports centre&quot;,
                phonetic: &quot;/ˈspɔːts ˌsen.tər/&quot;,
                meaning: &quot;体育中心&quot;,
                example: &quot;The new sports centre has a swimming pool and gym.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sports_centre--_gb_1.mp3&quot;,
                icon: &quot;fa-building&quot;
            },
            {
                word: &quot;stadium&quot;,
                phonetic: &quot;/ˈsteɪ.di.əm/&quot;,
                meaning: &quot;体育场&quot;,
                example: &quot;The football match was held at the national stadium.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/stadium--_gb_1.mp3&quot;,
                icon: &quot;fa-archway&quot;
            },
            {
                word: &quot;surf&quot;,
                phonetic: &quot;/sɜːf/&quot;,
                meaning: &quot;冲浪&quot;,
                example: &quot;They learned to surf during their holiday in Hawaii.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/surf--_gb_1.mp3&quot;,
                icon: &quot;fa-water&quot;
            },
            {
                word: &quot;surfboard&quot;,
                phonetic: &quot;/ˈsɜːf.bɔːd/&quot;,
                meaning: &quot;冲浪板&quot;,
                example: &quot;He carried his surfboard to the beach every morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/surfboard--_gb_1.mp3&quot;,
                icon: &quot;fa-water&quot;
            },
            {
                word: &quot;surfboarding&quot;,
                phonetic: &quot;/ˈsɜːf.bɔː.dɪŋ/&quot;,
                meaning: &quot;冲浪运动&quot;,
                example: &quot;Surfboarding requires good balance and strength.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/surfboarding--_gb_1.mp3&quot;,
                icon: &quot;fa-water&quot;
            },
            {
                word: &quot;swim&quot;,
                phonetic: &quot;/swɪm/&quot;,
                meaning: &quot;游泳&quot;,
                example: &quot;Children learn to swim at an early age in this country.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/swim--_gb_1.mp3&quot;,
                icon: &quot;fa-swimmer&quot;
            },
            {
                word: &quot;swimming&quot;,
                phonetic: &quot;/ˈswɪm.ɪŋ/&quot;,
                meaning: &quot;游泳运动&quot;,
                example: &quot;Swimming is an excellent form of exercise.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/swimming--_gb_1.mp3&quot;,
                icon: &quot;fa-swimmer&quot;
            },
            {
                word: &quot;swimming costume&quot;,
                phonetic: &quot;/ˈswɪm.ɪŋ ˌkɒs.tjuːm/&quot;,
                meaning: &quot;泳衣&quot;,
                example: &quot;She packed her swimming costume for the beach holiday.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/swimsuit--_gb_1.mp3&quot;,
                icon: &quot;fa-swimmer&quot;
            },
            {
                word: &quot;swimming pool&quot;,
                phonetic: &quot;/ˈswɪm.ɪŋ ˌpuːl/&quot;,
                meaning: &quot;游泳池&quot;,
                example: &quot;The hotel has both indoor and outdoor swimming pools.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/swimming_pool--_gb_1.mp3&quot;,
                icon: &quot;fa-swimming-pool&quot;
            },
            {
                word: &quot;swimsuit&quot;,
                phonetic: &quot;/ˈswɪm.suːt/&quot;,
                meaning: &quot;泳衣&quot;,
                example: &quot;She bought a new swimsuit for her vacation.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/swimsuit--_gb_1.mp3&quot;,
                icon: &quot;fa-swimmer&quot;
            },
            {
                word: &quot;table tennis&quot;,
                phonetic: &quot;/ˌteɪ.bəl ˈten.ɪs/&quot;,
                meaning: &quot;乒乓球&quot;,
                example: &quot;We played table tennis in the basement.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/table_tennis--_gb_1.mp3&quot;,
                icon: &quot;fa-table-tennis&quot;
            },
            {
                word: &quot;team&quot;,
                phonetic: &quot;/tiːm/&quot;,
                meaning: &quot;团队&quot;,
                example: &quot;Our school has a basketball team that competes nationally.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/team--_gb_1.mp3&quot;,
                icon: &quot;fa-users&quot;
            },
            {
                word: &quot;tennis&quot;,
                phonetic: &quot;/ˈten.ɪs/&quot;,
                meaning: &quot;网球&quot;,
                example: &quot;They play tennis every Saturday morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tennis--_gb_1.mp3&quot;,
                icon: &quot;fa-table-tennis&quot;
            },
            {
                word: &quot;tennis player&quot;,
                phonetic: &quot;/ˈten.ɪs ˌpleɪ.ər/&quot;,
                meaning: &quot;网球运动员&quot;,
                example: &quot;She is a professional tennis player who has won several tournaments.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tennis_player--_gb_1.mp3&quot;,
                icon: &quot;fa-user-alt&quot;
            },
            {
                word: &quot;throw&quot;,
                phonetic: &quot;/θrəʊ/&quot;,
                meaning: &quot;投掷&quot;,
                example: &quot;The quarterback threw the ball to the receiver.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/throw--_gb_1.mp3&quot;,
                icon: &quot;fa-football-ball&quot;
            },
            {
                word: &quot;ticket&quot;,
                phonetic: &quot;/ˈtɪk.ɪt/&quot;,
                meaning: &quot;票&quot;,
                example: &quot;We bought tickets for the football match.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ticket--_gb_1.mp3&quot;,
                icon: &quot;fa-ticket-alt&quot;
            },
            {
                word: &quot;tired&quot;,
                phonetic: &quot;/taɪəd/&quot;,
                meaning: &quot;疲劳的&quot;,
                example: &quot;After the marathon, he was extremely tired.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tired--_gb_1.mp3&quot;,
                icon: &quot;fa-bed&quot;
            },
            {
                word: &quot;trainers&quot;,
                phonetic: &quot;/ˈtreɪ.nəz/&quot;,
                meaning: &quot;运动鞋&quot;,
                example: &quot;He bought new trainers for his running sessions.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/trainers--_gb_1.mp3&quot;,
                icon: &quot;fa-shoe-prints&quot;
            },
            {
                word: &quot;versus&quot;,
                phonetic: &quot;/ˈvɜː.səs/&quot;,
                meaning: &quot;对&quot;,
                example: &quot;The championship game was Brazil versus Argentina.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/versus--_gb_1.mp3&quot;,
                icon: &quot;fa-vs&quot;
            },
            {
                word: &quot;volleyball&quot;,
                phonetic: &quot;/ˈvɒl.i.bɔːl/&quot;,
                meaning: &quot;排球&quot;,
                example: &quot;They played volleyball on the beach all afternoon.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/volleyball--_gb_1.mp3&quot;,
                icon: &quot;fa-volleyball-ball&quot;
            },
            {
                word: &quot;walk&quot;,
                phonetic: &quot;/wɔːk/&quot;,
                meaning: &quot;步行&quot;,
                example: &quot;We went for a long walk in the countryside.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/walk--_gb_1.mp3&quot;,
                icon: &quot;fa-walking&quot;
            },
            {
                word: &quot;watch&quot;,
                phonetic: &quot;/wɒtʃ/&quot;,
                meaning: &quot;观看&quot;,
                example: &quot;Thousands of fans came to watch the match.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/watch--_gb_1.mp3&quot;,
                icon: &quot;fa-eye&quot;
            },
            {
                word: &quot;win&quot;,
                phonetic: &quot;/wɪn/&quot;,
                meaning: &quot;赢得&quot;,
                example: &quot;The team worked hard to win the championship.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/win--_gb_1.mp3&quot;,
                icon: &quot;fa-trophy&quot;
            },
            {
                word: &quot;windsurfing&quot;,
                phonetic: &quot;/ˈwɪnd.sɜː.fɪŋ/&quot;,
                meaning: &quot;帆板运动&quot;,
                example: &quot;Windsurfing requires both strength and balance.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/windsurfing--_gb_1.mp3&quot;,
                icon: &quot;fa-wind&quot;
            },
            {
                word: &quot;winner&quot;,
                phonetic: &quot;/ˈwɪn.ər/&quot;,
                meaning: &quot;获胜者&quot;,
                example: &quot;The winner of the race received a gold medal.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/winner--_gb_1.mp3&quot;,
                icon: &quot;fa-medal&quot;
            }
        ];
        
        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;soundBtn&#x27;);
        const knowBtn = document.getElementById(&#x27;knowBtn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dontKnowBtn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsureBtn&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const progressText = document.getElementById(&#x27;progressText&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const reviewBtn = document.getElementById(&#x27;reviewBtn&#x27;);
        const resetBtn = document.getElementById(&#x27;resetBtn&#x27;);
        const completedMessage = document.getElementById(&#x27;completedMessage&#x27;);
        const notification = document.getElementById(&#x27;notification&#x27;);
        const sportsIcon = document.querySelector(&#x27;.sports-icon i&#x27;);
        
        // 应用状态
        let learnedWords = [];
        let wordsToReview = [];
        let currentWordIndex = -1;
        let remainingWords = [...words];
        let audio = new Audio();
        
        // 初始化应用
        function init() {
            // 重置状态
            learnedWords = [];
            wordsToReview = [];
            remainingWords = [...words];
            
            // 更新UI
            reviewSection.style.display = &#x27;none&#x27;;
            completedMessage.style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            updateProgress();
            
            // 显示第一个单词
            nextWord();
        }
        
        // 显示下一个单词
        function nextWord() {
            if (remainingWords.length === 0) {
                // 所有单词都学完了
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            // 随机选择一个单词
            currentWordIndex = Math.floor(Math.random() * remainingWords.length);
            const word = remainingWords[currentWordIndex];
            
            // 更新卡片内容
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = `&quot;${word.example}&quot;`;
            sportsIcon.className = `fas ${word.icon}`;
            
            // 确保卡片显示正面
            card.classList.remove(&#x27;flipped&#x27;);
            
            // 更新进度
            updateProgress();
        }
        
        // 更新进度条
        function updateProgress() {
            const learnedCount = words.length - remainingWords.length;
            const progress = (learnedCount / words.length) * 100;
            
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${learnedCount}/${words.length} 已学习`;
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            
            // 清空之前的复习单词
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 添加需要复习的单词
            wordsToReview.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.dataset.word = word.word;
                reviewWords.appendChild(wordEl);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completedMessage.style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;none&#x27;;
        }
        
        // 发音函数 - 使用预加载的MP3
        function speakWord() {
            const word = remainingWords[currentWordIndex];
            
            if (word.audio) {
                audio.src = word.audio;
                audio.play().catch(e =&gt; {
                    console.error(&quot;发音错误:&quot;, e);
                    showNotification();
                });
            } else {
                showNotification();
            }
        }
        
        // 显示通知
        function showNotification() {
            notification.textContent = &quot;发音功能需要网络连接&quot;;
            notification.style.display = &#x27;block&#x27;;
            notification.style.background = &#x27;#e74c3c&#x27;;
            
            setTimeout(() =&gt; {
                notification.style.display = &#x27;none&#x27;;
            }, 3000);
        }
        
        // 事件监听器
        card.addEventListener(&#x27;click&#x27;, () =&gt; {
            card.classList.toggle(&#x27;flipped&#x27;);
        });
        
        soundBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        reviewBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将复习单词设置为剩余单词
            remainingWords = [...wordsToReview];
            wordsToReview = [];
            
            // 隐藏复习部分
            reviewSection.style.display = &#x27;none&#x27;;
            
            // 开始复习
            nextWord();
        });
        
        resetBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 重新初始化应用
            init();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="21-大自然" class="section">
      <div class="section-header">
        <h2>21 大自然</h2>
        <div class="section-actions">
          <button onclick="openStandalone('21 大自然.html')">打开原文件</button>
          <button onclick="toggleHeight('21-大自然')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;自然与动物主题单词闪卡&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a5c1a, #2a7a2a, #1a5c1a);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .header {
            text-align: center;
            margin: 20px 0;
            color: white;
            width: 100%;
            padding: 10px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 15px;
            display: inline-block;
        }
        
        .header p {
            font-size: 1.1rem;
            max-width: 600px;
            margin: 15px auto 0;
            line-height: 1.6;
            color: #f8f9fa;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 800px;
        }
        
        /* 卡片容器 */
        .card-container {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1000px;
            margin: 20px 0;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            border-radius: 20px;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            text-align: center;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 3px solid #1a5c1a;
        }
        
        .card-back {
            background: linear-gradient(45deg, #e8f5e9, #c8e6c9);
            transform: rotateY(180deg);
            border: 3px solid #2a7a2a;
        }
        
        .word {
            font-size: 3.2rem;
            font-weight: bold;
            color: #1a5c1a;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .phonetic {
            font-size: 1.4rem;
            color: #6c757d;
            margin-bottom: 25px;
        }
        
        .meaning {
            font-size: 2.2rem;
            font-weight: bold;
            color: #d35400;
            margin-bottom: 20px;
        }
        
        .example {
            font-size: 1.4rem;
            color: #2c3e50;
            line-height: 1.6;
            font-style: italic;
            padding: 0 20px;
        }
        
        .nature-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: #1a5c1a;
        }
        
        .sound-btn {
            background: #4CAF50;
            color: white;
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        
        .sound-btn:hover {
            background: #388E3C;
            transform: scale(1.05);
        }
        
        .sound-btn:active {
            transform: scale(0.95);
        }
        
        .hint {
            margin-top: 20px;
            color: #6c757d;
            font-size: 1rem;
            position: absolute;
            bottom: 20px;
        }
        
        /* 控制按钮 */
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            min-width: 150px;
            justify-content: center;
        }
        
        .btn i {
            font-size: 1.3rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #2ecc71, #1abc9c);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        /* 进度条 */
        .progress-container {
            width: 100%;
            max-width: 500px;
            margin: 20px 0;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            height: 12px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #2ecc71, #3498db);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .progress-text {
            color: white;
            font-size: 1.1rem;
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        /* 复习模式 */
        .review-section {
            width: 100%;
            max-width: 700px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            display: none;
        }
        
        .review-section h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .review-word {
            background: #4CAF50;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .review-word:hover {
            background: #388E3C;
            transform: translateY(-3px);
        }
        
        .review-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .card-container {
                height: 320px;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .meaning {
                font-size: 1.8rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1rem;
                min-width: 120px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .controls {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 15px;
                min-width: 100px;
            }
            
            .card-container {
                height: 300px;
            }
            
            .word {
                font-size: 2.2rem;
            }
            
            .nature-icon {
                font-size: 2.8rem;
            }
        }
        
        .flip-icon {
            position: absolute;
            bottom: 15px;
            right: 15px;
            color: #6c757d;
            font-size: 1.2rem;
        }
        
        .completed-message {
            text-align: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            margin: 50px 0;
            display: none;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 30px;
            border-radius: 20px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #e74c3c;
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
        }
        
        .category-tag {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #1a5c1a;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;notification&quot; id=&quot;notification&quot;&gt;发音功能需要网络连接&lt;/div&gt;
    
    &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;&lt;i class=&quot;fas fa-tree&quot;&gt;&lt;/i&gt; 自然与动物主题单词闪卡&lt;/h1&gt;
        &lt;p&gt;学习自然与动物相关词汇 • 点击卡片翻转查看释义 • 使用下方按钮标记学习状态&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress-text&quot; id=&quot;progressText&quot;&gt;0/64 已学习&lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;category-tag&quot;&gt;自然元素&lt;/div&gt;
                    &lt;div class=&quot;nature-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-tree&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;tree&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/triː/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;soundBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;树&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;The tall tree provided shade on a hot summer day.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;knowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dontKnowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsureBtn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completed-message&quot; id=&quot;completedMessage&quot;&gt;
            &lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜！您已完成所有单词学习！
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;p style=&quot;text-align: center; margin-bottom: 20px; color: #6c757d;&quot;&gt;
                以下是您标记为&quot;不认识&quot;或&quot;不确定&quot;的单词，请选择重新学习
            &lt;/p&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;review-buttons&quot;&gt;
                &lt;button class=&quot;btn know&quot; id=&quot;reviewBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-play&quot;&gt;&lt;/i&gt; 开始复习
                &lt;/button&gt;
                &lt;button class=&quot;btn dont-know&quot; id=&quot;resetBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新学习全部
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        // 单词数据 - 自然与动物主题
        const words = [
            {
                word: &quot;air&quot;,
                phonetic: &quot;/eər/&quot;,
                meaning: &quot;空气&quot;,
                example: &quot;The fresh mountain air felt invigorating.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/air--_gb_1.mp3&quot;,
                icon: &quot;fa-wind&quot;
            },
            {
                word: &quot;animal&quot;,
                phonetic: &quot;/ˈæn.ɪ.məl/&quot;,
                meaning: &quot;动物&quot;,
                example: &quot;The zoo has many different kinds of animals.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/animal--_gb_1.mp3&quot;,
                icon: &quot;fa-paw&quot;
            },
            {
                word: &quot;autumn&quot;,
                phonetic: &quot;/ˈɔː.təm/&quot;,
                meaning: &quot;秋天&quot;,
                example: &quot;Leaves change color in autumn.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/autumn--_gb_1.mp3&quot;,
                icon: &quot;fa-leaf&quot;
            },
            {
                word: &quot;beach&quot;,
                phonetic: &quot;/biːtʃ/&quot;,
                meaning: &quot;海滩&quot;,
                example: &quot;Children were building sandcastles on the beach.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/beach--_gb_1.mp3&quot;,
                icon: &quot;fa-umbrella-beach&quot;
            },
            {
                word: &quot;bear&quot;,
                phonetic: &quot;/beər/&quot;,
                meaning: &quot;熊&quot;,
                example: &quot;We saw a brown bear in the forest.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bear--_gb_1.mp3&quot;,
                icon: &quot;fa-paw&quot;
            },
            {
                word: &quot;bee&quot;,
                phonetic: &quot;/biː/&quot;,
                meaning: &quot;蜜蜂&quot;,
                example: &quot;Bees collect nectar from flowers to make honey.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bee--_gb_1.mp3&quot;,
                icon: &quot;fa-bug&quot;
            },
            {
                word: &quot;bird&quot;,
                phonetic: &quot;/bɜːd/&quot;,
                meaning: &quot;鸟&quot;,
                example: &quot;A small bird built its nest in our garden.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bird--_gb_1.mp3&quot;,
                icon: &quot;fa-dove&quot;
            },
            {
                word: &quot;butterfly&quot;,
                phonetic: &quot;/ˈbʌt.ə.flaɪ/&quot;,
                meaning: &quot;蝴蝶&quot;,
                example: &quot;Colorful butterflies fluttered around the garden.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/butterfly--_gb_1.mp3&quot;,
                icon: &quot;fa-bug&quot;
            },
            {
                word: &quot;camel&quot;,
                phonetic: &quot;/ˈkæm.əl/&quot;,
                meaning: &quot;骆驼&quot;,
                example: &quot;Camels can survive for long periods without water.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/camel--_gb_1.mp3&quot;,
                icon: &quot;fa-horse&quot;
            },
            {
                word: &quot;chicken&quot;,
                phonetic: &quot;/ˈtʃɪk.ɪn/&quot;,
                meaning: &quot;鸡&quot;,
                example: &quot;The farmer collects eggs from the chickens every morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/chicken--_gb_1.mp3&quot;,
                icon: &quot;fa-kiwi-bird&quot;
            },
            {
                word: &quot;country&quot;,
                phonetic: &quot;/ˈkʌn.tri/&quot;,
                meaning: &quot;国家；乡村&quot;,
                example: &quot;They moved to the country for a quieter life.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/country--_gb_1.mp3&quot;,
                icon: &quot;fa-globe-europe&quot;
            },
            {
                word: &quot;countryside&quot;,
                phonetic: &quot;/ˈkʌn.tri.saɪd/&quot;,
                meaning: &quot;乡村&quot;,
                example: &quot;We went for a drive through the beautiful countryside.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/countryside--_gb_1.mp3&quot;,
                icon: &quot;fa-tractor&quot;
            },
            {
                word: &quot;cow&quot;,
                phonetic: &quot;/kaʊ/&quot;,
                meaning: &quot;奶牛&quot;,
                example: &quot;The cows were grazing in the green field.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cow--_gb_1.mp3&quot;,
                icon: &quot;fa-cow&quot;
            },
            {
                word: &quot;desert&quot;,
                phonetic: &quot;/ˈdez.ət/&quot;,
                meaning: &quot;沙漠&quot;,
                example: &quot;The Sahara is the largest hot desert in the world.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/desert--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;dinosaur&quot;,
                phonetic: &quot;/ˈdaɪ.nə.sɔːr/&quot;,
                meaning: &quot;恐龙&quot;,
                example: &quot;Children are fascinated by dinosaurs.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/dinosaur--_gb_1.mp3&quot;,
                icon: &quot;fa-dragon&quot;
            },
            {
                word: &quot;dog&quot;,
                phonetic: &quot;/dɒɡ/&quot;,
                meaning: &quot;狗&quot;,
                example: &quot;Their dog barks whenever someone comes to the door.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/dog--_gb_1.mp3&quot;,
                icon: &quot;fa-dog&quot;
            },
            {
                word: &quot;dolphin&quot;,
                phonetic: &quot;/ˈdɒl.fɪn/&quot;,
                meaning: &quot;海豚&quot;,
                example: &quot;We saw dolphins jumping in the waves.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/dolphin--_gb_1.mp3&quot;,
                icon: &quot;fa-fish&quot;
            },
            {
                word: &quot;duck&quot;,
                phonetic: &quot;/dʌk/&quot;,
                meaning: &quot;鸭子&quot;,
                example: &quot;The ducklings followed their mother across the pond.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/duck--_gb_1.mp3&quot;,
                icon: &quot;fa-duck&quot;
            },
            {
                word: &quot;east&quot;,
                phonetic: &quot;/iːst/&quot;,
                meaning: &quot;东方&quot;,
                example: &quot;The sun rises in the east.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/east--_gb_1.mp3&quot;,
                icon: &quot;fa-compass&quot;
            },
            {
                word: &quot;elephant&quot;,
                phonetic: &quot;/ˈel.ɪ.fənt/&quot;,
                meaning: &quot;大象&quot;,
                example: &quot;Elephants are the largest land animals.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/elephant--_gb_1.mp3&quot;,
                icon: &quot;fa-elephant&quot;
            },
            {
                word: &quot;explorer&quot;,
                phonetic: &quot;/ɪkˈsplɔː.rər/&quot;,
                meaning: &quot;探险家&quot;,
                example: &quot;The explorer mapped unknown territories.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/explorer--_gb_1.mp3&quot;,
                icon: &quot;fa-binoculars&quot;
            },
            {
                word: &quot;field&quot;,
                phonetic: &quot;/fiːld/&quot;,
                meaning: &quot;田野&quot;,
                example: &quot;Cows were grazing in the green field.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/field--_gb_1.mp3&quot;,
                icon: &quot;fa-tractor&quot;
            },
            {
                word: &quot;fire&quot;,
                phonetic: &quot;/faɪər/&quot;,
                meaning: &quot;火&quot;,
                example: &quot;Campers gathered around the fire to keep warm.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/fire--_gb_1.mp3&quot;,
                icon: &quot;fa-fire&quot;
            },
            {
                word: &quot;fish&quot;,
                phonetic: &quot;/fɪʃ/&quot;,
                meaning: &quot;鱼&quot;,
                example: &quot;The children caught several fish in the lake.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/fish--_gb_1.mp3&quot;,
                icon: &quot;fa-fish&quot;
            },
            {
                word: &quot;flower&quot;,
                phonetic: &quot;/flaʊər/&quot;,
                meaning: &quot;花&quot;,
                example: &quot;She planted colorful flowers in her garden.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/flower--_gb_1.mp3&quot;,
                icon: &quot;fa-seedling&quot;
            },
            {
                word: &quot;forest&quot;,
                phonetic: &quot;/ˈfɒr.ɪst/&quot;,
                meaning: &quot;森林&quot;,
                example: &quot;We went hiking through the dense forest.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/forest--_gb_1.mp3&quot;,
                icon: &quot;fa-tree&quot;
            },
            {
                word: &quot;grass&quot;,
                phonetic: &quot;/ɡrɑːs/&quot;,
                meaning: &quot;草&quot;,
                example: &quot;The grass needs cutting after all the rain.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/grass--_gb_1.mp3&quot;,
                icon: &quot;fa-leaf&quot;
            },
            {
                word: &quot;grow&quot;,
                phonetic: &quot;/ɡrəʊ/&quot;,
                meaning: &quot;生长&quot;,
                example: &quot;Plants need sunlight and water to grow.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/grow--_gb_1.mp3&quot;,
                icon: &quot;fa-seedling&quot;
            },
            {
                word: &quot;hill&quot;,
                phonetic: &quot;/hɪl/&quot;,
                meaning: &quot;小山&quot;,
                example: &quot;The village is situated on top of a hill.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/hill--_gb_1.mp3&quot;,
                icon: &quot;fa-mountain&quot;
            },
            {
                word: &quot;horse&quot;,
                phonetic: &quot;/hɔːs/&quot;,
                meaning: &quot;马&quot;,
                example: &quot;She enjoys riding her horse in the countryside.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/horse--_gb_1.mp3&quot;,
                icon: &quot;fa-horse&quot;
            },
            {
                word: &quot;hot&quot;,
                phonetic: &quot;/hɒt/&quot;,
                meaning: &quot;热的&quot;,
                example: &quot;The desert can be extremely hot during the day.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/hot--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;ice&quot;,
                phonetic: &quot;/aɪs/&quot;,
                meaning: &quot;冰&quot;,
                example: &quot;The lake was covered with a thick layer of ice.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ice--_gb_1.mp3&quot;,
                icon: &quot;fa-icicles&quot;
            },
            {
                word: &quot;insect&quot;,
                phonetic: &quot;/ˈɪn.sekt/&quot;,
                meaning: &quot;昆虫&quot;,
                example: &quot;Butterflies and bees are types of insects.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/insect--_gb_1.mp3&quot;,
                icon: &quot;fa-bug&quot;
            },
            {
                word: &quot;island&quot;,
                phonetic: &quot;/ˈaɪ.lənd/&quot;,
                meaning: &quot;岛屿&quot;,
                example: &quot;They spent their vacation on a tropical island.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/island--_gb_1.mp3&quot;,
                icon: &quot;fa-island-tropical&quot;
            },
            {
                word: &quot;lake&quot;,
                phonetic: &quot;/leɪk/&quot;,
                meaning: &quot;湖&quot;,
                example: &quot;We went swimming in the clear blue lake.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/lake--_gb_1.mp3&quot;,
                icon: &quot;fa-water&quot;
            },
            {
                word: &quot;moon&quot;,
                phonetic: &quot;/muːn/&quot;,
                meaning: &quot;月亮&quot;,
                example: &quot;The full moon lit up the night sky.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/moon--_gb_1.mp3&quot;,
                icon: &quot;fa-moon&quot;
            },
            {
                word: &quot;mountain&quot;,
                phonetic: &quot;/ˈmaʊn.tɪn/&quot;,
                meaning: &quot;山&quot;,
                example: &quot;They climbed the highest mountain in the region.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/mountain--_gb_1.mp3&quot;,
                icon: &quot;fa-mountain&quot;
            },
            {
                word: &quot;mouse&quot;,
                phonetic: &quot;/maʊs/&quot;,
                meaning: &quot;老鼠&quot;,
                example: &quot;The cat chased a mouse around the garden.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/mouse--_gb_1.mp3&quot;,
                icon: &quot;fa-mouse&quot;
            },
            {
                word: &quot;nature&quot;,
                phonetic: &quot;/ˈneɪ.tʃər/&quot;,
                meaning: &quot;自然&quot;,
                example: &quot;We should protect nature for future generations.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/nature--_gb_1.mp3&quot;,
                icon: &quot;fa-leaf&quot;
            },
            {
                word: &quot;north&quot;,
                phonetic: &quot;/nɔːθ/&quot;,
                meaning: &quot;北方&quot;,
                example: &quot;The Arctic is located in the far north.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/north--_gb_1.mp3&quot;,
                icon: &quot;fa-compass&quot;
            },
            {
                word: &quot;plant&quot;,
                phonetic: &quot;/plɑːnt/&quot;,
                meaning: &quot;植物；种植&quot;,
                example: &quot;This plant needs watering every day.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/plant--_gb_1.mp3&quot;,
                icon: &quot;fa-seedling&quot;
            },
            {
                word: &quot;rabbit&quot;,
                phonetic: &quot;/ˈræb.ɪt/&quot;,
                meaning: &quot;兔子&quot;,
                example: &quot;A rabbit hopped across the garden path.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/rabbit--_gb_1.mp3&quot;,
                icon: &quot;fa-rabbit&quot;
            },
            {
                word: &quot;river&quot;,
                phonetic: &quot;/ˈrɪv.ər/&quot;,
                meaning: &quot;河流&quot;,
                example: &quot;The river flows through the valley.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/river--_gb_1.mp3&quot;,
                icon: &quot;fa-water&quot;
            },
            {
                word: &quot;sea&quot;,
                phonetic: &quot;/siː/&quot;,
                meaning: &quot;海&quot;,
                example: &quot;We swam in the clear blue sea.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sea--_gb_1.mp3&quot;,
                icon: &quot;fa-water&quot;
            },
            {
                word: &quot;sheep&quot;,
                phonetic: &quot;/ʃiːp/&quot;,
                meaning: &quot;绵羊&quot;,
                example: &quot;Sheep were grazing on the hillside.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sheep--_gb_1.mp3&quot;,
                icon: &quot;fa-sheep&quot;
            },
            {
                word: &quot;sky&quot;,
                phonetic: &quot;/skaɪ/&quot;,
                meaning: &quot;天空&quot;,
                example: &quot;The sky was clear and blue without a single cloud.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sky--_gb_1.mp3&quot;,
                icon: &quot;fa-cloud&quot;
            },
            {
                word: &quot;snake&quot;,
                phonetic: &quot;/sneɪk/&quot;,
                meaning: &quot;蛇&quot;,
                example: &quot;We saw a long snake slithering through the grass.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/snake--_gb_1.mp3&quot;,
                icon: &quot;fa-staff-snake&quot;
            },
            {
                word: &quot;south&quot;,
                phonetic: &quot;/saʊθ/&quot;,
                meaning: &quot;南方&quot;,
                example: &quot;Penguins live in the far south near Antarctica.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/south--_gb_1.mp3&quot;,
                icon: &quot;fa-compass&quot;
            },
            {
                word: &quot;space&quot;,
                phonetic: &quot;/speɪs/&quot;,
                meaning: &quot;太空；空间&quot;,
                example: &quot;Astronauts travel into space to conduct experiments.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/space--_gb_1.mp3&quot;,
                icon: &quot;fa-meteor&quot;
            },
            {
                word: &quot;spring&quot;,
                phonetic: &quot;/sprɪŋ/&quot;,
                meaning: &quot;春天&quot;,
                example: &quot;Flowers bloom everywhere in spring.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/spring--_gb_1.mp3&quot;,
                icon: &quot;fa-seedling&quot;
            },
            {
                word: &quot;star&quot;,
                phonetic: &quot;/stɑːr/&quot;,
                meaning: &quot;星星&quot;,
                example: &quot;The night sky was filled with thousands of stars.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/star--_gb_1.mp3&quot;,
                icon: &quot;fa-star&quot;
            },
            {
                word: &quot;summer&quot;,
                phonetic: &quot;/ˈsʌm.ər/&quot;,
                meaning: &quot;夏天&quot;,
                example: &quot;We always go to the beach during summer.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/summer--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;tiger&quot;,
                phonetic: &quot;/ˈtaɪ.ɡər/&quot;,
                meaning: &quot;老虎&quot;,
                example: &quot;The tiger is a magnificent and powerful animal.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tiger--_gb_1.mp3&quot;,
                icon: &quot;fa-paw&quot;
            },
            {
                word: &quot;tree&quot;,
                phonetic: &quot;/triː/&quot;,
                meaning: &quot;树&quot;,
                example: &quot;The tall tree provided shade on a hot summer day.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tree--_gb_1.mp3&quot;,
                icon: &quot;fa-tree&quot;
            },
            {
                word: &quot;water&quot;,
                phonetic: &quot;/ˈwɔː.tər/&quot;,
                meaning: &quot;水&quot;,
                example: &quot;Plants need water to grow and survive.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/water--_gb_1.mp3&quot;,
                icon: &quot;fa-tint&quot;
            },
            {
                word: &quot;west&quot;,
                phonetic: &quot;/west/&quot;,
                meaning: &quot;西方&quot;,
                example: &quot;The sun sets in the west.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/west--_gb_1.mp3&quot;,
                icon: &quot;fa-compass&quot;
            },
            {
                word: &quot;whale&quot;,
                phonetic: &quot;/weɪl/&quot;,
                meaning: &quot;鲸鱼&quot;,
                example: &quot;We saw a huge whale breaching the ocean surface.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/whale--_gb_1.mp3&quot;,
                icon: &quot;fa-fish&quot;
            },
            {
                word: &quot;wild animal&quot;,
                phonetic: &quot;/waɪld ˈæn.ɪ.məl/&quot;,
                meaning: &quot;野生动物&quot;,
                example: &quot;Lions and elephants are examples of wild animals.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/wild_animal--_gb_1.mp3&quot;,
                icon: &quot;fa-paw&quot;
            },
            {
                word: &quot;winter&quot;,
                phonetic: &quot;/ˈwɪn.tər/&quot;,
                meaning: &quot;冬天&quot;,
                example: &quot;We enjoy skiing during the winter months.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/winter--_gb_1.mp3&quot;,
                icon: &quot;fa-snowflake&quot;
            },
            {
                word: &quot;wood&quot;,
                phonetic: &quot;/wʊd/&quot;,
                meaning: &quot;木头；树林&quot;,
                example: &quot;The table is made of solid wood.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/wood--_gb_1.mp3&quot;,
                icon: &quot;fa-tree&quot;
            },
            {
                word: &quot;wool&quot;,
                phonetic: &quot;/wʊl/&quot;,
                meaning: &quot;羊毛&quot;,
                example: &quot;Sheep provide wool for making warm clothing.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/wool--_gb_1.mp3&quot;,
                icon: &quot;fa-sheep&quot;
            },
            {
                word: &quot;world&quot;,
                phonetic: &quot;/wɜːld/&quot;,
                meaning: &quot;世界&quot;,
                example: &quot;We should all work together to protect our world.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/world--_gb_1.mp3&quot;,
                icon: &quot;fa-globe&quot;
            }
        ];
        
        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;soundBtn&#x27;);
        const knowBtn = document.getElementById(&#x27;knowBtn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dontKnowBtn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsureBtn&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const progressText = document.getElementById(&#x27;progressText&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const reviewBtn = document.getElementById(&#x27;reviewBtn&#x27;);
        const resetBtn = document.getElementById(&#x27;resetBtn&#x27;);
        const completedMessage = document.getElementById(&#x27;completedMessage&#x27;);
        const notification = document.getElementById(&#x27;notification&#x27;);
        const natureIcon = document.querySelector(&#x27;.nature-icon i&#x27;);
        
        // 应用状态
        let learnedWords = [];
        let wordsToReview = [];
        let currentWordIndex = -1;
        let remainingWords = [...words];
        let audio = new Audio();
        
        // 初始化应用
        function init() {
            // 重置状态
            learnedWords = [];
            wordsToReview = [];
            remainingWords = [...words];
            
            // 更新UI
            reviewSection.style.display = &#x27;none&#x27;;
            completedMessage.style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            updateProgress();
            
            // 显示第一个单词
            nextWord();
        }
        
        // 显示下一个单词
        function nextWord() {
            if (remainingWords.length === 0) {
                // 所有单词都学完了
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            // 随机选择一个单词
            currentWordIndex = Math.floor(Math.random() * remainingWords.length);
            const word = remainingWords[currentWordIndex];
            
            // 更新卡片内容
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = `&quot;${word.example}&quot;`;
            natureIcon.className = `fas ${word.icon}`;
            
            // 确保卡片显示正面
            card.classList.remove(&#x27;flipped&#x27;);
            
            // 更新进度
            updateProgress();
        }
        
        // 更新进度条
        function updateProgress() {
            const learnedCount = words.length - remainingWords.length;
            const progress = (learnedCount / words.length) * 100;
            
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${learnedCount}/${words.length} 已学习`;
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            
            // 清空之前的复习单词
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 添加需要复习的单词
            wordsToReview.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.dataset.word = word.word;
                reviewWords.appendChild(wordEl);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completedMessage.style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;none&#x27;;
        }
        
        // 发音函数 - 使用预加载的MP3
        function speakWord() {
            const word = remainingWords[currentWordIndex];
            
            if (word.audio) {
                audio.src = word.audio;
                audio.play().catch(e =&gt; {
                    console.error(&quot;发音错误:&quot;, e);
                    showNotification();
                });
            } else {
                showNotification();
            }
        }
        
        // 显示通知
        function showNotification() {
            notification.textContent = &quot;发音功能需要网络连接&quot;;
            notification.style.display = &#x27;block&#x27;;
            notification.style.background = &#x27;#e74c3c&#x27;;
            
            setTimeout(() =&gt; {
                notification.style.display = &#x27;none&#x27;;
            }, 3000);
        }
        
        // 事件监听器
        card.addEventListener(&#x27;click&#x27;, () =&gt; {
            card.classList.toggle(&#x27;flipped&#x27;);
        });
        
        soundBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        reviewBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将复习单词设置为剩余单词
            remainingWords = [...wordsToReview];
            wordsToReview = [];
            
            // 隐藏复习部分
            reviewSection.style.display = &#x27;none&#x27;;
            
            // 开始复习
            nextWord();
        });
        
        resetBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 重新初始化应用
            init();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="22-时间" class="section">
      <div class="section-header">
        <h2>22 时间</h2>
        <div class="section-actions">
          <button onclick="openStandalone('22 时间.html')">打开原文件</button>
          <button onclick="toggleHeight('22-时间')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;时间与日期主题单词闪卡&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1e5799, #2989d8, #1e5799);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .header {
            text-align: center;
            margin: 20px 0;
            color: white;
            width: 100%;
            padding: 10px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 15px;
            display: inline-block;
        }
        
        .header p {
            font-size: 1.1rem;
            max-width: 600px;
            margin: 15px auto 0;
            line-height: 1.6;
            color: #f8f9fa;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 800px;
        }
        
        /* 卡片容器 */
        .card-container {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1000px;
            margin: 20px 0;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            border-radius: 20px;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            text-align: center;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 3px solid #1e5799;
        }
        
        .card-back {
            background: linear-gradient(45deg, #e3f2fd, #bbdefb);
            transform: rotateY(180deg);
            border: 3px solid #2989d8;
        }
        
        .word {
            font-size: 3.2rem;
            font-weight: bold;
            color: #1e5799;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .phonetic {
            font-size: 1.4rem;
            color: #6c757d;
            margin-bottom: 25px;
        }
        
        .meaning {
            font-size: 2.2rem;
            font-weight: bold;
            color: #1565c0;
            margin-bottom: 20px;
        }
        
        .example {
            font-size: 1.4rem;
            color: #2c3e50;
            line-height: 1.6;
            font-style: italic;
            padding: 0 20px;
        }
        
        .time-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: #1e5799;
        }
        
        .sound-btn {
            background: #2196F3;
            color: white;
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        
        .sound-btn:hover {
            background: #1976D2;
            transform: scale(1.05);
        }
        
        .sound-btn:active {
            transform: scale(0.95);
        }
        
        .hint {
            margin-top: 20px;
            color: #6c757d;
            font-size: 1rem;
            position: absolute;
            bottom: 20px;
        }
        
        /* 控制按钮 */
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            min-width: 150px;
            justify-content: center;
        }
        
        .btn i {
            font-size: 1.3rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #2ecc71, #1abc9c);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        /* 进度条 */
        .progress-container {
            width: 100%;
            max-width: 500px;
            margin: 20px 0;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            height: 12px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #2ecc71, #3498db);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .progress-text {
            color: white;
            font-size: 1.1rem;
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        /* 复习模式 */
        .review-section {
            width: 100%;
            max-width: 700px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            display: none;
        }
        
        .review-section h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .review-word {
            background: #2196F3;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .review-word:hover {
            background: #1976D2;
            transform: translateY(-3px);
        }
        
        .review-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .card-container {
                height: 320px;
            }
            
            .word {
                font-size: 2.5rem;
            }
            
            .meaning {
                font-size: 1.8rem;
            }
            
            .example {
                font-size: 1.2rem;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1rem;
                min-width: 120px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .controls {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 15px;
                min-width: 100px;
            }
            
            .card-container {
                height: 300px;
            }
            
            .word {
                font-size: 2.2rem;
            }
            
            .time-icon {
                font-size: 2.8rem;
            }
        }
        
        .flip-icon {
            position: absolute;
            bottom: 15px;
            right: 15px;
            color: #6c757d;
            font-size: 1.2rem;
        }
        
        .completed-message {
            text-align: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            margin: 50px 0;
            display: none;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 30px;
            border-radius: 20px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #e74c3c;
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
        }
        
        .category-tag {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #1e5799;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
        }
        
        .clock-display {
            font-size: 2.5rem;
            font-weight: bold;
            color: #1e5799;
            margin: 10px 0 20px;
            padding: 10px 20px;
            background: rgba(225, 245, 254, 0.5);
            border-radius: 15px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;notification&quot; id=&quot;notification&quot;&gt;发音功能需要网络连接&lt;/div&gt;
    
    &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;&lt;i class=&quot;fas fa-clock&quot;&gt;&lt;/i&gt; 时间与日期主题单词闪卡&lt;/h1&gt;
        &lt;p&gt;学习时间、日期和季节相关词汇 • 点击卡片翻转查看释义 • 使用下方按钮标记学习状态&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress-text&quot; id=&quot;progressText&quot;&gt;0/59 已学习&lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;category-tag&quot;&gt;时间表达&lt;/div&gt;
                    &lt;div class=&quot;time-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-clock&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;afternoon&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˌɑːf.tərˈnuːn/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;soundBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;下午&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;We usually have a meeting every Tuesday afternoon.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;knowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dontKnowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsureBtn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completed-message&quot; id=&quot;completedMessage&quot;&gt;
            &lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜！您已完成所有单词学习！
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;p style=&quot;text-align: center; margin-bottom: 20px; color: #6c757d;&quot;&gt;
                以下是您标记为&quot;不认识&quot;或&quot;不确定&quot;的单词，请选择重新学习
            &lt;/p&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;review-buttons&quot;&gt;
                &lt;button class=&quot;btn know&quot; id=&quot;reviewBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-play&quot;&gt;&lt;/i&gt; 开始复习
                &lt;/button&gt;
                &lt;button class=&quot;btn dont-know&quot; id=&quot;resetBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新学习全部
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        // 单词数据 - 时间与日期主题
        const words = [
            {
                word: &quot;afternoon&quot;,
                phonetic: &quot;/ˌɑːf.tərˈnuːn/&quot;,
                meaning: &quot;下午&quot;,
                example: &quot;We usually have a meeting every Tuesday afternoon.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/afternoon--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;a.m.&quot;,
                phonetic: &quot;/ˌeɪˈem/&quot;,
                meaning: &quot;上午&quot;,
                example: &quot;The train leaves at 8 a.m. tomorrow morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/am--_gb_1.mp3&quot;,
                icon: &quot;fa-sunrise&quot;
            },
            {
                word: &quot;p.m.&quot;,
                phonetic: &quot;/ˌpiːˈem/&quot;,
                meaning: &quot;下午&quot;,
                example: &quot;The movie starts at 7 p.m. tonight.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/pm--_gb_1.mp3&quot;,
                icon: &quot;fa-sunset&quot;
            },
            {
                word: &quot;appointment&quot;,
                phonetic: &quot;/əˈpɔɪnt.mənt/&quot;,
                meaning: &quot;约会&quot;,
                example: &quot;I have a doctor&#x27;s appointment at 3 p.m.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/appointment--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-check&quot;
            },
            {
                word: &quot;autumn&quot;,
                phonetic: &quot;/ˈɔː.təm/&quot;,
                meaning: &quot;秋天&quot;,
                example: &quot;Leaves change color in autumn.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/autumn--_gb_1.mp3&quot;,
                icon: &quot;fa-leaf&quot;
            },
            {
                word: &quot;birthday&quot;,
                phonetic: &quot;/ˈbɜːθ.deɪ/&quot;,
                meaning: &quot;生日&quot;,
                example: &quot;Her birthday is on the 15th of May.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/birthday--_gb_1.mp3&quot;,
                icon: &quot;fa-birthday-cake&quot;
            },
            {
                word: &quot;calendar&quot;,
                phonetic: &quot;/ˈkæl.ɪn.dər/&quot;,
                meaning: &quot;日历&quot;,
                example: &quot;Mark the date on your calendar.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/calendar--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-alt&quot;
            },
            {
                word: &quot;century&quot;,
                phonetic: &quot;/ˈsen.tʃər.i/&quot;,
                meaning: &quot;世纪&quot;,
                example: &quot;We live in the 21st century.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/century--_gb_1.mp3&quot;,
                icon: &quot;fa-history&quot;
            },
            {
                word: &quot;clock&quot;,
                phonetic: &quot;/klɒk/&quot;,
                meaning: &quot;时钟&quot;,
                example: &quot;The clock on the wall shows the correct time.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/clock--_gb_1.mp3&quot;,
                icon: &quot;fa-clock&quot;
            },
            {
                word: &quot;daily&quot;,
                phonetic: &quot;/ˈdeɪ.li/&quot;,
                meaning: &quot;每日的&quot;,
                example: &quot;I check my emails daily.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/daily--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-day&quot;
            },
            {
                word: &quot;date&quot;,
                phonetic: &quot;/deɪt/&quot;,
                meaning: &quot;日期&quot;,
                example: &quot;What&#x27;s the date today?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/date--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar&quot;
            },
            {
                word: &quot;day&quot;,
                phonetic: &quot;/deɪ/&quot;,
                meaning: &quot;天&quot;,
                example: &quot;There are seven days in a week.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/day--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;diary&quot;,
                phonetic: &quot;/ˈdaɪə.ri/&quot;,
                meaning: &quot;日记&quot;,
                example: &quot;She writes in her diary every night.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/diary--_gb_1.mp3&quot;,
                icon: &quot;fa-book&quot;
            },
            {
                word: &quot;evening&quot;,
                phonetic: &quot;/ˈiːv.nɪŋ/&quot;,
                meaning: &quot;晚上&quot;,
                example: &quot;We usually have dinner in the evening.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/evening--_gb_1.mp3&quot;,
                icon: &quot;fa-moon&quot;
            },
            {
                word: &quot;half (past)&quot;,
                phonetic: &quot;/hɑːf pɑːst/&quot;,
                meaning: &quot;半点&quot;,
                example: &quot;It&#x27;s half past three now.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/half_past--_gb_1.mp3&quot;,
                icon: &quot;fa-clock&quot;
            },
            {
                word: &quot;holidays&quot;,
                phonetic: &quot;/ˈhɒl.ɪ.deɪz/&quot;,
                meaning: &quot;假期&quot;,
                example: &quot;We&#x27;re going to Spain for our holidays.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/holidays--_gb_1.mp3&quot;,
                icon: &quot;fa-umbrella-beach&quot;
            },
            {
                word: &quot;hour&quot;,
                phonetic: &quot;/aʊər/&quot;,
                meaning: &quot;小时&quot;,
                example: &quot;There are 60 minutes in an hour.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/hour--_gb_1.mp3&quot;,
                icon: &quot;fa-hourglass-half&quot;
            },
            {
                word: &quot;January&quot;,
                phonetic: &quot;/ˈdʒæn.ju.ər.i/&quot;,
                meaning: &quot;一月&quot;,
                example: &quot;New Year&#x27;s Day is on January 1st.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/january--_gb_1.mp3&quot;,
                icon: &quot;fa-snowflake&quot;
            },
            {
                word: &quot;February&quot;,
                phonetic: &quot;/ˈfeb.ru.ər.i/&quot;,
                meaning: &quot;二月&quot;,
                example: &quot;Valentine&#x27;s Day is in February.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/february--_gb_1.mp3&quot;,
                icon: &quot;fa-heart&quot;
            },
            {
                word: &quot;March&quot;,
                phonetic: &quot;/mɑːtʃ/&quot;,
                meaning: &quot;三月&quot;,
                example: &quot;Spring begins in March.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/march--_gb_1.mp3&quot;,
                icon: &quot;fa-wind&quot;
            },
            {
                word: &quot;April&quot;,
                phonetic: &quot;/ˈeɪ.prəl/&quot;,
                meaning: &quot;四月&quot;,
                example: &quot;April showers bring May flowers.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/april--_gb_1.mp3&quot;,
                icon: &quot;fa-cloud-rain&quot;
            },
            {
                word: &quot;May&quot;,
                phonetic: &quot;/meɪ/&quot;,
                meaning: &quot;五月&quot;,
                example: &quot;We often have warm weather in May.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/may--_gb_1.mp3&quot;,
                icon: &quot;fa-seedling&quot;
            },
            {
                word: &quot;June&quot;,
                phonetic: &quot;/dʒuːn/&quot;,
                meaning: &quot;六月&quot;,
                example: &quot;Summer officially starts in June.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/june--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;July&quot;,
                phonetic: &quot;/dʒʊˈlaɪ/&quot;,
                meaning: &quot;七月&quot;,
                example: &quot;Independence Day is on July 4th in the US.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/july--_gb_1.mp3&quot;,
                icon: &quot;fa-fire&quot;
            },
            {
                word: &quot;August&quot;,
                phonetic: &quot;/ˈɔː.ɡəst/&quot;,
                meaning: &quot;八月&quot;,
                example: &quot;Many people take vacations in August.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/august--_gb_1.mp3&quot;,
                icon: &quot;fa-umbrella-beach&quot;
            },
            {
                word: &quot;September&quot;,
                phonetic: &quot;/sepˈtem.bər/&quot;,
                meaning: &quot;九月&quot;,
                example: &quot;School usually starts in September.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/september--_gb_1.mp3&quot;,
                icon: &quot;fa-book-open&quot;
            },
            {
                word: &quot;October&quot;,
                phonetic: &quot;/ɒkˈtəʊ.bər/&quot;,
                meaning: &quot;十月&quot;,
                example: &quot;Halloween is on October 31st.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/october--_gb_1.mp3&quot;,
                icon: &quot;fa-ghost&quot;
            },
            {
                word: &quot;November&quot;,
                phonetic: &quot;/nəʊˈvem.bər/&quot;,
                meaning: &quot;十一月&quot;,
                example: &quot;Thanksgiving is celebrated in November in the US.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/november--_gb_1.mp3&quot;,
                icon: &quot;fa-leaf&quot;
            },
            {
                word: &quot;December&quot;,
                phonetic: &quot;/dɪˈsem.bər/&quot;,
                meaning: &quot;十二月&quot;,
                example: &quot;Christmas is on December 25th.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/december--_gb_1.mp3&quot;,
                icon: &quot;fa-snowman&quot;
            },
            {
                word: &quot;meeting&quot;,
                phonetic: &quot;/ˈmiː.tɪŋ/&quot;,
                meaning: &quot;会议&quot;,
                example: &quot;We have a staff meeting every Monday morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/meeting--_gb_1.mp3&quot;,
                icon: &quot;fa-users&quot;
            },
            {
                word: &quot;midnight&quot;,
                phonetic: &quot;/ˈmɪd.naɪt/&quot;,
                meaning: &quot;午夜&quot;,
                example: &quot;The party went on until midnight.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/midnight--_gb_1.mp3&quot;,
                icon: &quot;fa-moon&quot;
            },
            {
                word: &quot;minute&quot;,
                phonetic: &quot;/ˈmɪn.ɪt/&quot;,
                meaning: &quot;分钟&quot;,
                example: &quot;I&#x27;ll be ready in five minutes.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/minute--_gb_1.mp3&quot;,
                icon: &quot;fa-hourglass-start&quot;
            },
            {
                word: &quot;moment&quot;,
                phonetic: &quot;/ˈməʊ.mənt/&quot;,
                meaning: &quot;片刻&quot;,
                example: &quot;Wait a moment, please.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/moment--_gb_1.mp3&quot;,
                icon: &quot;fa-stopwatch&quot;
            },
            {
                word: &quot;Monday&quot;,
                phonetic: &quot;/ˈmʌn.deɪ/&quot;,
                meaning: &quot;星期一&quot;,
                example: &quot;I start work on Monday morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/monday--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;Tuesday&quot;,
                phonetic: &quot;/ˈtʃuːz.deɪ/&quot;,
                meaning: &quot;星期二&quot;,
                example: &quot;We have English class every Tuesday.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tuesday--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;Wednesday&quot;,
                phonetic: &quot;/ˈwenz.deɪ/&quot;,
                meaning: &quot;星期三&quot;,
                example: &quot;Wednesday is often called &#x27;hump day&#x27;.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/wednesday--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;Thursday&quot;,
                phonetic: &quot;/ˈθɜːz.deɪ/&quot;,
                meaning: &quot;星期四&quot;,
                example: &quot;Thursday comes before Friday.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/thursday--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;Friday&quot;,
                phonetic: &quot;/ˈfraɪ.deɪ/&quot;,
                meaning: &quot;星期五&quot;,
                example: &quot;We usually go out on Friday nights.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/friday--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;Saturday&quot;,
                phonetic: &quot;/ˈsæt.ə.deɪ/&quot;,
                meaning: &quot;星期六&quot;,
                example: &quot;Saturday is my favorite day of the week.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/saturday--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;Sunday&quot;,
                phonetic: &quot;/ˈsʌn.deɪ/&quot;,
                meaning: &quot;星期日&quot;,
                example: &quot;Many people relax on Sundays.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sunday--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;month&quot;,
                phonetic: &quot;/mʌnθ/&quot;,
                meaning: &quot;月份&quot;,
                example: &quot;February is the shortest month.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/month--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar&quot;
            },
            {
                word: &quot;monthly&quot;,
                phonetic: &quot;/ˈmʌnθ.li/&quot;,
                meaning: &quot;每月的&quot;,
                example: &quot;We have a monthly team meeting.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/monthly--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-alt&quot;
            },
            {
                word: &quot;morning&quot;,
                phonetic: &quot;/ˈmɔː.nɪŋ/&quot;,
                meaning: &quot;早晨&quot;,
                example: &quot;I drink coffee every morning.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/morning--_gb_1.mp3&quot;,
                icon: &quot;fa-coffee&quot;
            },
            {
                word: &quot;night&quot;,
                phonetic: &quot;/naɪt/&quot;,
                meaning: &quot;夜晚&quot;,
                example: &quot;Stars are visible at night.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/night--_gb_1.mp3&quot;,
                icon: &quot;fa-moon&quot;
            },
            {
                word: &quot;noon&quot;,
                phonetic: &quot;/nuːn/&quot;,
                meaning: &quot;中午&quot;,
                example: &quot;We&#x27;ll meet at noon for lunch.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/noon--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;o’clock&quot;,
                phonetic: &quot;/əˈklɒk/&quot;,
                meaning: &quot;点钟&quot;,
                example: &quot;The meeting starts at 9 o&#x27;clock.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/o_clock--_gb_1.mp3&quot;,
                icon: &quot;fa-clock&quot;
            },
            {
                word: &quot;past&quot;,
                phonetic: &quot;/pɑːst/&quot;,
                meaning: &quot;过（时间）&quot;,
                example: &quot;It&#x27;s ten past four.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/past--_gb_1.mp3&quot;,
                icon: &quot;fa-arrow-right&quot;
            },
            {
                word: &quot;quarter (past / to)&quot;,
                phonetic: &quot;/ˈkwɔː.tər/&quot;,
                meaning: &quot;一刻钟&quot;,
                example: &quot;It&#x27;s quarter past three.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/quarter--_gb_1.mp3&quot;,
                icon: &quot;fa-clock&quot;
            },
            {
                word: &quot;second&quot;,
                phonetic: &quot;/ˈsek.ənd/&quot;,
                meaning: &quot;秒&quot;,
                example: &quot;There are 60 seconds in a minute.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/second--_gb_1.mp3&quot;,
                icon: &quot;fa-stopwatch&quot;
            },
            {
                word: &quot;spring&quot;,
                phonetic: &quot;/sprɪŋ/&quot;,
                meaning: &quot;春天&quot;,
                example: &quot;Flowers bloom in spring.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/spring--_gb_1.mp3&quot;,
                icon: &quot;fa-seedling&quot;
            },
            {
                word: &quot;summer&quot;,
                phonetic: &quot;/ˈsʌm.ər/&quot;,
                meaning: &quot;夏天&quot;,
                example: &quot;We go to the beach in summer.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/summer--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;time&quot;,
                phonetic: &quot;/taɪm/&quot;,
                meaning: &quot;时间&quot;,
                example: &quot;What time is it now?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/time--_gb_1.mp3&quot;,
                icon: &quot;fa-clock&quot;
            },
            {
                word: &quot;today&quot;,
                phonetic: &quot;/təˈdeɪ/&quot;,
                meaning: &quot;今天&quot;,
                example: &quot;Today is Monday.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/today--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-day&quot;
            },
            {
                word: &quot;tomorrow&quot;,
                phonetic: &quot;/təˈmɒr.əʊ/&quot;,
                meaning: &quot;明天&quot;,
                example: &quot;I&#x27;ll see you tomorrow.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tomorrow--_gb_1.mp3&quot;,
                icon: &quot;fa-arrow-right&quot;
            },
            {
                word: &quot;tonight&quot;,
                phonetic: &quot;/təˈnaɪt/&quot;,
                meaning: &quot;今晚&quot;,
                example: &quot;We&#x27;re going to a concert tonight.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tonight--_gb_1.mp3&quot;,
                icon: &quot;fa-moon&quot;
            },
            {
                word: &quot;week&quot;,
                phonetic: &quot;/wiːk/&quot;,
                meaning: &quot;周&quot;,
                example: &quot;There are 52 weeks in a year.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/week--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;weekday&quot;,
                phonetic: &quot;/ˈwiːk.deɪ/&quot;,
                meaning: &quot;工作日&quot;,
                example: &quot;I work from Monday to Friday - weekdays.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/weekday--_gb_1.mp3&quot;,
                icon: &quot;fa-briefcase&quot;
            },
            {
                word: &quot;weekend&quot;,
                phonetic: &quot;/ˌwiːkˈend/&quot;,
                meaning: &quot;周末&quot;,
                example: &quot;We relax on the weekend.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/weekend--_gb_1.mp3&quot;,
                icon: &quot;fa-glass-cheers&quot;
            },
            {
                word: &quot;weekly&quot;,
                phonetic: &quot;/ˈwiːk.li/&quot;,
                meaning: &quot;每周的&quot;,
                example: &quot;We have a weekly team meeting.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/weekly--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar-week&quot;
            },
            {
                word: &quot;winter&quot;,
                phonetic: &quot;/ˈwɪn.tər/&quot;,
                meaning: &quot;冬天&quot;,
                example: &quot;It snows here in winter.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/winter--_gb_1.mp3&quot;,
                icon: &quot;fa-snowflake&quot;
            },
            {
                word: &quot;working hours&quot;,
                phonetic: &quot;/ˈwɜː.kɪŋ ˌaʊəz/&quot;,
                meaning: &quot;工作时间&quot;,
                example: &quot;My working hours are from 9 to 5.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/working_hours--_gb_1.mp3&quot;,
                icon: &quot;fa-briefcase&quot;
            },
            {
                word: &quot;year&quot;,
                phonetic: &quot;/jɪər/&quot;,
                meaning: &quot;年&quot;,
                example: &quot;There are 12 months in a year.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/year--_gb_1.mp3&quot;,
                icon: &quot;fa-calendar&quot;
            },
            {
                word: &quot;yesterday&quot;,
                phonetic: &quot;/ˈjes.tə.deɪ/&quot;,
                meaning: &quot;昨天&quot;,
                example: &quot;I met her yesterday.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/yesterday--_gb_1.mp3&quot;,
                icon: &quot;fa-arrow-left&quot;
            }
        ];
        
        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;soundBtn&#x27;);
        const knowBtn = document.getElementById(&#x27;knowBtn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dontKnowBtn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsureBtn&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const progressText = document.getElementById(&#x27;progressText&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const reviewBtn = document.getElementById(&#x27;reviewBtn&#x27;);
        const resetBtn = document.getElementById(&#x27;resetBtn&#x27;);
        const completedMessage = document.getElementById(&#x27;completedMessage&#x27;);
        const notification = document.getElementById(&#x27;notification&#x27;);
        const timeIcon = document.querySelector(&#x27;.time-icon i&#x27;);
        
        // 应用状态
        let learnedWords = [];
        let wordsToReview = [];
        let currentWordIndex = -1;
        let remainingWords = [...words];
        let audio = new Audio();
        
        // 初始化应用
        function init() {
            // 重置状态
            learnedWords = [];
            wordsToReview = [];
            remainingWords = [...words];
            
            // 更新UI
            reviewSection.style.display = &#x27;none&#x27;;
            completedMessage.style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            updateProgress();
            
            // 显示第一个单词
            nextWord();
        }
        
        // 显示下一个单词
        function nextWord() {
            if (remainingWords.length === 0) {
                // 所有单词都学完了
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            // 随机选择一个单词
            currentWordIndex = Math.floor(Math.random() * remainingWords.length);
            const word = remainingWords[currentWordIndex];
            
            // 更新卡片内容
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = `&quot;${word.example}&quot;`;
            timeIcon.className = `fas ${word.icon}`;
            
            // 确保卡片显示正面
            card.classList.remove(&#x27;flipped&#x27;);
            
            // 更新进度
            updateProgress();
        }
        
        // 更新进度条
        function updateProgress() {
            const learnedCount = words.length - remainingWords.length;
            const progress = (learnedCount / words.length) * 100;
            
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${learnedCount}/${words.length} 已学习`;
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            
            // 清空之前的复习单词
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 添加需要复习的单词
            wordsToReview.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.dataset.word = word.word;
                reviewWords.appendChild(wordEl);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completedMessage.style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;none&#x27;;
        }
        
        // 发音函数 - 使用预加载的MP3
        function speakWord() {
            const word = remainingWords[currentWordIndex];
            
            if (word.audio) {
                audio.src = word.audio;
                audio.play().catch(e =&gt; {
                    console.error(&quot;发音错误:&quot;, e);
                    showNotification();
                });
            } else {
                showNotification();
            }
        }
        
        // 显示通知
        function showNotification() {
            notification.textContent = &quot;发音功能需要网络连接&quot;;
            notification.style.display = &#x27;block&#x27;;
            notification.style.background = &#x27;#e74c3c&#x27;;
            
            setTimeout(() =&gt; {
                notification.style.display = &#x27;none&#x27;;
            }, 3000);
        }
        
        // 事件监听器
        card.addEventListener(&#x27;click&#x27;, () =&gt; {
            card.classList.toggle(&#x27;flipped&#x27;);
        });
        
        soundBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        reviewBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将复习单词设置为剩余单词
            remainingWords = [...wordsToReview];
            wordsToReview = [];
            
            // 隐藏复习部分
            reviewSection.style.display = &#x27;none&#x27;;
            
            // 开始复习
            nextWord();
        });
        
        resetBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 重新初始化应用
            init();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="23-旅游和交通运输" class="section">
      <div class="section-header">
        <h2>23 旅游和交通运输</h2>
        <div class="section-actions">
          <button onclick="openStandalone('23 旅游和交通运输.html')">打开原文件</button>
          <button onclick="toggleHeight('23-旅游和交通运输')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;交通工具与旅行主题单词闪卡&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a237e, #283593, #1a237e);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .header {
            text-align: center;
            margin: 20px 0;
            color: white;
            width: 100%;
            padding: 10px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 15px;
            display: inline-block;
        }
        
        .header p {
            font-size: 1.1rem;
            max-width: 600px;
            margin: 15px auto 0;
            line-height: 1.6;
            color: #f8f9fa;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 800px;
        }
        
        /* 卡片容器 */
        .card-container {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1000px;
            margin: 20px 0;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            border-radius: 20px;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            text-align: center;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 3px solid #1a237e;
        }
        
        .card-back {
            background: linear-gradient(45deg, #e8eaf6, #c5cae9);
            transform: rotateY(180deg);
            border: 3px solid #283593;
        }
        
        .word {
            font-size: 3.0rem;
            font-weight: bold;
            color: #1a237e;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .phonetic {
            font-size: 1.3rem;
            color: #6c757d;
            margin-bottom: 25px;
        }
        
        .meaning {
            font-size: 2.0rem;
            font-weight: bold;
            color: #1565c0;
            margin-bottom: 20px;
        }
        
        .example {
            font-size: 1.3rem;
            color: #2c3e50;
            line-height: 1.6;
            font-style: italic;
            padding: 0 20px;
        }
        
        .travel-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: #1a237e;
        }
        
        .sound-btn {
            background: #3949ab;
            color: white;
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        
        .sound-btn:hover {
            background: #303f9f;
            transform: scale(1.05);
        }
        
        .sound-btn:active {
            transform: scale(0.95);
        }
        
        .hint {
            margin-top: 20px;
            color: #6c757d;
            font-size: 1rem;
            position: absolute;
            bottom: 20px;
        }
        
        /* 控制按钮 */
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            min-width: 150px;
            justify-content: center;
        }
        
        .btn i {
            font-size: 1.3rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #2ecc71, #1abc9c);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        /* 进度条 */
        .progress-container {
            width: 100%;
            max-width: 500px;
            margin: 20px 0;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            height: 12px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #2ecc71, #3498db);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .progress-text {
            color: white;
            font-size: 1.1rem;
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        /* 复习模式 */
        .review-section {
            width: 100%;
            max-width: 700px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            display: none;
        }
        
        .review-section h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .review-word {
            background: #3949ab;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .review-word:hover {
            background: #303f9f;
            transform: translateY(-3px);
        }
        
        .review-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .card-container {
                height: 320px;
            }
            
            .word {
                font-size: 2.2rem;
            }
            
            .meaning {
                font-size: 1.6rem;
            }
            
            .example {
                font-size: 1.1rem;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1rem;
                min-width: 120px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .travel-icon {
                font-size: 3.0rem;
            }
        }
        
        @media (max-width: 480px) {
            .controls {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 15px;
                min-width: 100px;
            }
            
            .card-container {
                height: 300px;
            }
            
            .word {
                font-size: 1.8rem;
            }
            
            .travel-icon {
                font-size: 2.5rem;
            }
        }
        
        .flip-icon {
            position: absolute;
            bottom: 15px;
            right: 15px;
            color: #6c757d;
            font-size: 1.2rem;
        }
        
        .completed-message {
            text-align: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            margin: 50px 0;
            display: none;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 30px;
            border-radius: 20px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #e74c3c;
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
        }
        
        .category-tag {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #1a237e;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;notification&quot; id=&quot;notification&quot;&gt;发音功能需要网络连接&lt;/div&gt;
    
    &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;&lt;i class=&quot;fas fa-plane&quot;&gt;&lt;/i&gt; 交通工具与旅行主题单词闪卡&lt;/h1&gt;
        &lt;p&gt;学习交通和旅行相关词汇 • 点击卡片翻转查看释义 • 使用下方按钮标记学习状态&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress-text&quot; id=&quot;progressText&quot;&gt;0/68 已学习&lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;category-tag&quot;&gt;交通工具&lt;/div&gt;
                    &lt;div class=&quot;travel-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-plane&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;aeroplane&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈeə.rə.pleɪn/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;soundBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;飞机&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;We traveled to Paris by aeroplane.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;knowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dontKnowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsureBtn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completed-message&quot; id=&quot;completedMessage&quot;&gt;
            &lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜！您已完成所有单词学习！
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;p style=&quot;text-align: center; margin-bottom: 20px; color: #6c757d;&quot;&gt;
                以下是您标记为&quot;不认识&quot;或&quot;不确定&quot;的单词，请选择重新学习
            &lt;/p&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;review-buttons&quot;&gt;
                &lt;button class=&quot;btn know&quot; id=&quot;reviewBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-play&quot;&gt;&lt;/i&gt; 开始复习
                &lt;/button&gt;
                &lt;button class=&quot;btn dont-know&quot; id=&quot;resetBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新学习全部
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        // 单词数据 - 交通工具与旅行主题
        const words = [
            {
                word: &quot;aeroplane&quot;,
                phonetic: &quot;/ˈeə.rə.pleɪn/&quot;,
                meaning: &quot;飞机&quot;,
                example: &quot;We traveled to Paris by aeroplane.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/airplane--_gb_1.mp3&quot;,
                icon: &quot;fa-plane&quot;
            },
            {
                word: &quot;airport&quot;,
                phonetic: &quot;/ˈeə.pɔːt/&quot;,
                meaning: &quot;机场&quot;,
                example: &quot;We arrived at the airport two hours before our flight.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/airport--_gb_1.mp3&quot;,
                icon: &quot;fa-plane-departure&quot;
            },
            {
                word: &quot;ambulance&quot;,
                phonetic: &quot;/ˈæm.bjʊ.ləns/&quot;,
                meaning: &quot;救护车&quot;,
                example: &quot;Call an ambulance immediately!&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ambulance--_gb_1.mp3&quot;,
                icon: &quot;fa-ambulance&quot;
            },
            {
                word: &quot;backpack&quot;,
                phonetic: &quot;/ˈbæk.pæk/&quot;,
                meaning: &quot;背包&quot;,
                example: &quot;He carried his laptop in his backpack.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/backpack--_gb_1.mp3&quot;,
                icon: &quot;fa-hiking&quot;
            },
            {
                word: &quot;boat&quot;,
                phonetic: &quot;/bəʊt/&quot;,
                meaning: &quot;船&quot;,
                example: &quot;We crossed the river in a small boat.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/boat--_gb_1.mp3&quot;,
                icon: &quot;fa-ship&quot;
            },
            {
                word: &quot;bridge&quot;,
                phonetic: &quot;/brɪdʒ/&quot;,
                meaning: &quot;桥梁&quot;,
                example: &quot;The Golden Gate Bridge is in San Francisco.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bridge--_gb_1.mp3&quot;,
                icon: &quot;fa-bridge&quot;
            },
            {
                word: &quot;bus&quot;,
                phonetic: &quot;/bʌs/&quot;,
                meaning: &quot;公共汽车&quot;,
                example: &quot;I take the bus to work every day.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bus--_gb_1.mp3&quot;,
                icon: &quot;fa-bus&quot;
            },
            {
                word: &quot;bus station&quot;,
                phonetic: &quot;/ˈbʌs ˌsteɪ.ʃən/&quot;,
                meaning: &quot;公交车站&quot;,
                example: &quot;The bus station is downtown.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bus_station--_gb_1.mp3&quot;,
                icon: &quot;fa-bus-alt&quot;
            },
            {
                word: &quot;bus stop&quot;,
                phonetic: &quot;/ˈbʌs ˌstɒp/&quot;,
                meaning: &quot;公交车站点&quot;,
                example: &quot;There&#x27;s a bus stop near my house.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/bus_stop--_gb_1.mp3&quot;,
                icon: &quot;fa-bus&quot;
            },
            {
                word: &quot;car&quot;,
                phonetic: &quot;/kɑːr/&quot;,
                meaning: &quot;汽车&quot;,
                example: &quot;We drove to the beach in our car.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/car--_gb_1.mp3&quot;,
                icon: &quot;fa-car&quot;
            },
            {
                word: &quot;case&quot;,
                phonetic: &quot;/keɪs/&quot;,
                meaning: &quot;箱子&quot;,
                example: &quot;She packed her suitcase for the trip.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/case--_gb_1.mp3&quot;,
                icon: &quot;fa-suitcase&quot;
            },
            {
                word: &quot;coach&quot;,
                phonetic: &quot;/kəʊtʃ/&quot;,
                meaning: &quot;长途汽车&quot;,
                example: &quot;We took a coach to London.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/coach--_gb_1.mp3&quot;,
                icon: &quot;fa-bus&quot;
            },
            {
                word: &quot;country&quot;,
                phonetic: &quot;/ˈkʌn.tri/&quot;,
                meaning: &quot;国家；乡村&quot;,
                example: &quot;We drove through the countryside.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/country--_gb_1.mp3&quot;,
                icon: &quot;fa-globe-europe&quot;
            },
            {
                word: &quot;delay&quot;,
                phonetic: &quot;/dɪˈleɪ/&quot;,
                meaning: &quot;延迟&quot;,
                example: &quot;Our flight had a two-hour delay.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/delay--_gb_1.mp3&quot;,
                icon: &quot;fa-clock&quot;
            },
            {
                word: &quot;delayed&quot;,
                phonetic: &quot;/dɪˈleɪd/&quot;,
                meaning: &quot;延迟的&quot;,
                example: &quot;The train was delayed due to bad weather.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/delayed--_gb_1.mp3&quot;,
                icon: &quot;fa-hourglass-half&quot;
            },
            {
                word: &quot;drive&quot;,
                phonetic: &quot;/draɪv/&quot;,
                meaning: &quot;驾驶&quot;,
                example: &quot;Can you drive a manual car?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/drive--_gb_1.mp3&quot;,
                icon: &quot;fa-car&quot;
            },
            {
                word: &quot;driver&quot;,
                phonetic: &quot;/ˈdraɪ.vər/&quot;,
                meaning: &quot;司机&quot;,
                example: &quot;The taxi driver knew the city well.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/driver--_gb_1.mp3&quot;,
                icon: &quot;fa-user-alt&quot;
            },
            {
                word: &quot;driving licence&quot;,
                phonetic: &quot;/ˈdraɪ.vɪŋ ˌlaɪ.səns/&quot;,
                meaning: &quot;驾驶执照&quot;,
                example: &quot;You need a driving licence to rent a car.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/driving_licence--_gb_1.mp3&quot;,
                icon: &quot;fa-id-card&quot;
            },
            {
                word: &quot;engine&quot;,
                phonetic: &quot;/ˈen.dʒɪn/&quot;,
                meaning: &quot;引擎&quot;,
                example: &quot;The car&#x27;s engine needs repair.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/engine--_gb_1.mp3&quot;,
                icon: &quot;fa-cogs&quot;
            },
            {
                word: &quot;engineer&quot;,
                phonetic: &quot;/ˌen.dʒɪˈnɪər/&quot;,
                meaning: &quot;工程师&quot;,
                example: &quot;The engineer fixed the train.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/engineer--_gb_1.mp3&quot;,
                icon: &quot;fa-hard-hat&quot;
            },
            {
                word: &quot;explorer&quot;,
                phonetic: &quot;/ɪkˈsplɔː.rər/&quot;,
                meaning: &quot;探险家&quot;,
                example: &quot;He was a famous explorer who discovered new lands.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/explorer--_gb_1.mp3&quot;,
                icon: &quot;fa-binoculars&quot;
            },
            {
                word: &quot;far&quot;,
                phonetic: &quot;/fɑːr/&quot;,
                meaning: &quot;远的&quot;,
                example: &quot;The airport is far from the city center.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/far--_gb_1.mp3&quot;,
                icon: &quot;fa-road&quot;
            },
            {
                word: &quot;flight&quot;,
                phonetic: &quot;/flaɪt/&quot;,
                meaning: &quot;航班&quot;,
                example: &quot;Our flight to Tokyo leaves at 9 AM.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/flight--_gb_1.mp3&quot;,
                icon: &quot;fa-plane&quot;
            },
            {
                word: &quot;fly&quot;,
                phonetic: &quot;/flaɪ/&quot;,
                meaning: &quot;飞行&quot;,
                example: &quot;Birds can fly, but humans need airplanes.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/fly--_gb_1.mp3&quot;,
                icon: &quot;fa-plane&quot;
            },
            {
                word: &quot;garage&quot;,
                phonetic: &quot;/ˈɡær.ɑːʒ/&quot;,
                meaning: &quot;车库&quot;,
                example: &quot;We park our car in the garage.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/garage--_gb_1.mp3&quot;,
                icon: &quot;fa-warehouse&quot;
            },
            {
                word: &quot;helicopter&quot;,
                phonetic: &quot;/ˈhel.ɪˌkɒp.tər/&quot;,
                meaning: &quot;直升机&quot;,
                example: &quot;The helicopter landed on the hospital roof.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/helicopter--_gb_1.mp3&quot;,
                icon: &quot;fa-helicopter&quot;
            },
            {
                word: &quot;journey&quot;,
                phonetic: &quot;/ˈdʒɜː.ni/&quot;,
                meaning: &quot;旅程&quot;,
                example: &quot;The journey from London to Paris takes about 2 hours by train.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/journey--_gb_1.mp3&quot;,
                icon: &quot;fa-route&quot;
            },
            {
                word: &quot;leave&quot;,
                phonetic: &quot;/liːv/&quot;,
                meaning: &quot;离开&quot;,
                example: &quot;Our train leaves at 3 PM.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/leave--_gb_1.mp3&quot;,
                icon: &quot;fa-sign-out-alt&quot;
            },
            {
                word: &quot;left&quot;,
                phonetic: &quot;/left/&quot;,
                meaning: &quot;左边&quot;,
                example: &quot;Turn left at the next traffic light.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/left--_gb_1.mp3&quot;,
                icon: &quot;fa-arrow-left&quot;
            },
            {
                word: &quot;light&quot;,
                phonetic: &quot;/laɪt/&quot;,
                meaning: &quot;灯；轻的&quot;,
                example: &quot;Red light means stop.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/light--_gb_1.mp3&quot;,
                icon: &quot;fa-lightbulb&quot;
            },
            {
                word: &quot;luggage&quot;,
                phonetic: &quot;/ˈlʌɡ.ɪdʒ/&quot;,
                meaning: &quot;行李&quot;,
                example: &quot;Please collect your luggage from the carousel.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/luggage--_gb_1.mp3&quot;,
                icon: &quot;fa-suitcase&quot;
            },
            {
                word: &quot;machine&quot;,
                phonetic: &quot;/məˈʃiːn/&quot;,
                meaning: &quot;机器&quot;,
                example: &quot;The vending machine sells drinks and snacks.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/machine--_gb_1.mp3&quot;,
                icon: &quot;fa-cogs&quot;
            },
            {
                word: &quot;map&quot;,
                phonetic: &quot;/mæp/&quot;,
                meaning: &quot;地图&quot;,
                example: &quot;We used a map to find our way through the city.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/map--_gb_1.mp3&quot;,
                icon: &quot;fa-map&quot;
            },
            {
                word: &quot;mechanic&quot;,
                phonetic: &quot;/məˈkæn.ɪk/&quot;,
                meaning: &quot;机械师&quot;,
                example: &quot;The mechanic fixed our car&#x27;s engine.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/mechanic--_gb_1.mp3&quot;,
                icon: &quot;fa-tools&quot;
            },
            {
                word: &quot;mirror&quot;,
                phonetic: &quot;/ˈmɪr.ər/&quot;,
                meaning: &quot;镜子&quot;,
                example: &quot;Check your rear-view mirror before changing lanes.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/mirror--_gb_1.mp3&quot;,
                icon: &quot;fa-mirror&quot;
            },
            {
                word: &quot;miss&quot;,
                phonetic: &quot;/mɪs/&quot;,
                meaning: &quot;错过&quot;,
                example: &quot;Hurry up or you&#x27;ll miss the train!&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/miss--_gb_1.mp3&quot;,
                icon: &quot;fa-running&quot;
            },
            {
                word: &quot;motorbike&quot;,
                phonetic: &quot;/ˈməʊ.tə.baɪk/&quot;,
                meaning: &quot;摩托车&quot;,
                example: &quot;He rides his motorbike to work every day.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/motorbike--_gb_1.mp3&quot;,
                icon: &quot;fa-motorcycle&quot;
            },
            {
                word: &quot;motorway&quot;,
                phonetic: &quot;/ˈməʊ.tə.weɪ/&quot;,
                meaning: &quot;高速公路&quot;,
                example: &quot;We drove on the motorway to get there faster.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/motorway--_gb_1.mp3&quot;,
                icon: &quot;fa-road&quot;
            },
            {
                word: &quot;move&quot;,
                phonetic: &quot;/muːv/&quot;,
                meaning: &quot;移动&quot;,
                example: &quot;Please move your car from the driveway.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/move--_gb_1.mp3&quot;,
                icon: &quot;fa-arrows-alt&quot;
            },
            {
                word: &quot;oil&quot;,
                phonetic: &quot;/ɔɪl/&quot;,
                meaning: &quot;油&quot;,
                example: &quot;The car needs an oil change.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/oil--_gb_1.mp3&quot;,
                icon: &quot;fa-oil-can&quot;
            },
            {
                word: &quot;park&quot;,
                phonetic: &quot;/pɑːk/&quot;,
                meaning: &quot;停车&quot;,
                example: &quot;You can&#x27;t park your car here.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/park--_gb_1.mp3&quot;,
                icon: &quot;fa-parking&quot;
            },
            {
                word: &quot;passenger&quot;,
                phonetic: &quot;/ˈpæs.ɪn.dʒər/&quot;,
                meaning: &quot;乘客&quot;,
                example: &quot;All passengers must wear seat belts.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/passenger--_gb_1.mp3&quot;,
                icon: &quot;fa-user&quot;
            },
            {
                word: &quot;passport&quot;,
                phonetic: &quot;/ˈpɑːs.pɔːt/&quot;,
                meaning: &quot;护照&quot;,
                example: &quot;You need a passport to travel abroad.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/passport--_gb_1.mp3&quot;,
                icon: &quot;fa-passport&quot;
            },
            {
                word: &quot;petrol&quot;,
                phonetic: &quot;/ˈpet.rəl/&quot;,
                meaning: &quot;汽油&quot;,
                example: &quot;We need to stop for petrol soon.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/petrol--_gb_1.mp3&quot;,
                icon: &quot;fa-gas-pump&quot;
            },
            {
                word: &quot;petrol station&quot;,
                phonetic: &quot;/ˈpet.rəl ˌsteɪ.ʃən/&quot;,
                meaning: &quot;加油站&quot;,
                example: &quot;There&#x27;s a petrol station on the next corner.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/petrol_station--_gb_1.mp3&quot;,
                icon: &quot;fa-gas-pump&quot;
            },
            {
                word: &quot;pilot&quot;,
                phonetic: &quot;/ˈpaɪ.lət/&quot;,
                meaning: &quot;飞行员&quot;,
                example: &quot;The pilot announced we would be landing soon.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/pilot--_gb_1.mp3&quot;,
                icon: &quot;fa-user-tie&quot;
            },
            {
                word: &quot;platform&quot;,
                phonetic: &quot;/ˈplæt.fɔːm/&quot;,
                meaning: &quot;站台&quot;,
                example: &quot;The train to Manchester departs from platform 3.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/platform--_gb_1.mp3&quot;,
                icon: &quot;fa-train&quot;
            },
            {
                word: &quot;railway&quot;,
                phonetic: &quot;/ˈreɪl.weɪ/&quot;,
                meaning: &quot;铁路&quot;,
                example: &quot;The railway connects the two cities.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/railway--_gb_1.mp3&quot;,
                icon: &quot;fa-train&quot;
            },
            {
                word: &quot;repair&quot;,
                phonetic: &quot;/rɪˈpeər/&quot;,
                meaning: &quot;修理&quot;,
                example: &quot;The mechanic will repair your car tomorrow.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/repair--_gb_1.mp3&quot;,
                icon: &quot;fa-tools&quot;
            },
            {
                word: &quot;return&quot;,
                phonetic: &quot;/rɪˈtɜːn/&quot;,
                meaning: &quot;返回；往返票&quot;,
                example: &quot;I bought a return ticket to London.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/return--_gb_1.mp3&quot;,
                icon: &quot;fa-undo&quot;
            },
            {
                word: &quot;ride&quot;,
                phonetic: &quot;/raɪd/&quot;,
                meaning: &quot;乘坐；骑&quot;,
                example: &quot;Can I ride your bicycle?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ride--_gb_1.mp3&quot;,
                icon: &quot;fa-bicycle&quot;
            },
            {
                word: &quot;right&quot;,
                phonetic: &quot;/raɪt/&quot;,
                meaning: &quot;右边；正确的&quot;,
                example: &quot;Turn right at the next intersection.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/right--_gb_1.mp3&quot;,
                icon: &quot;fa-arrow-right&quot;
            },
            {
                word: &quot;road&quot;,
                phonetic: &quot;/rəʊd/&quot;,
                meaning: &quot;道路&quot;,
                example: &quot;The road was closed due to construction.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/road--_gb_1.mp3&quot;,
                icon: &quot;fa-road&quot;
            },
            {
                word: &quot;roundabout&quot;,
                phonetic: &quot;/ˈraʊnd.ə.baʊt/&quot;,
                meaning: &quot;环岛&quot;,
                example: &quot;Take the second exit at the roundabout.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/roundabout--_gb_1.mp3&quot;,
                icon: &quot;fa-circle&quot;
            },
            {
                word: &quot;sailing&quot;,
                phonetic: &quot;/ˈseɪ.lɪŋ/&quot;,
                meaning: &quot;帆船运动&quot;,
                example: &quot;We went sailing on the lake.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sailing--_gb_1.mp3&quot;,
                icon: &quot;fa-ship&quot;
            },
            {
                word: &quot;seat&quot;,
                phonetic: &quot;/siːt/&quot;,
                meaning: &quot;座位&quot;,
                example: &quot;Please fasten your seat belt.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/seat--_gb_1.mp3&quot;,
                icon: &quot;fa-chair&quot;
            },
            {
                word: &quot;ship&quot;,
                phonetic: &quot;/ʃɪp/&quot;,
                meaning: &quot;轮船&quot;,
                example: &quot;The ship sailed across the ocean.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ship--_gb_1.mp3&quot;,
                icon: &quot;fa-ship&quot;
            },
            {
                word: &quot;station&quot;,
                phonetic: &quot;/ˈsteɪ.ʃən/&quot;,
                meaning: &quot;车站&quot;,
                example: &quot;The train station is downtown.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/station--_gb_1.mp3&quot;,
                icon: &quot;fa-train&quot;
            },
            {
                word: &quot;stop&quot;,
                phonetic: &quot;/stɒp/&quot;,
                meaning: &quot;停止；车站&quot;,
                example: &quot;The bus stop is on the next block.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/stop--_gb_1.mp3&quot;,
                icon: &quot;fa-stop-circle&quot;
            },
            {
                word: &quot;straight on&quot;,
                phonetic: &quot;/ˌstreɪt ˈɒn/&quot;,
                meaning: &quot;直行&quot;,
                example: &quot;Go straight on for two miles.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/straight_on--_gb_1.mp3&quot;,
                icon: &quot;fa-arrow-up&quot;
            },
            {
                word: &quot;street&quot;,
                phonetic: &quot;/striːt/&quot;,
                meaning: &quot;街道&quot;,
                example: &quot;Our hotel is on Main Street.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/street--_gb_1.mp3&quot;,
                icon: &quot;fa-road&quot;
            },
            {
                word: &quot;suitcase&quot;,
                phonetic: &quot;/ˈsuːt.keɪs/&quot;,
                meaning: &quot;手提箱&quot;,
                example: &quot;She packed her suitcase for the trip.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/suitcase--_gb_1.mp3&quot;,
                icon: &quot;fa-suitcase&quot;
            },
            {
                word: &quot;taxi&quot;,
                phonetic: &quot;/ˈtæk.si/&quot;,
                meaning: &quot;出租车&quot;,
                example: &quot;We took a taxi to the airport.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/taxi--_gb_1.mp3&quot;,
                icon: &quot;fa-taxi&quot;
            },
            {
                word: &quot;ticket&quot;,
                phonetic: &quot;/ˈtɪk.ɪt/&quot;,
                meaning: &quot;票&quot;,
                example: &quot;I bought a train ticket to Edinburgh.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ticket--_gb_1.mp3&quot;,
                icon: &quot;fa-ticket-alt&quot;
            },
            {
                word: &quot;tour&quot;,
                phonetic: &quot;/tʊər/&quot;,
                meaning: &quot;旅行&quot;,
                example: &quot;We went on a tour of the city.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tour--_gb_1.mp3&quot;,
                icon: &quot;fa-map-marked-alt&quot;
            },
            {
                word: &quot;tour guide&quot;,
                phonetic: &quot;/ˈtʊə ɡaɪd/&quot;,
                meaning: &quot;导游&quot;,
                example: &quot;The tour guide showed us around the museum.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tour_guide--_gb_1.mp3&quot;,
                icon: &quot;fa-user-tie&quot;
            },
            {
                word: &quot;tourist&quot;,
                phonetic: &quot;/ˈtʊə.rɪst/&quot;,
                meaning: &quot;游客&quot;,
                example: &quot;Many tourists visit this castle every year.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tourist--_gb_1.mp3&quot;,
                icon: &quot;fa-camera&quot;
            },
            {
                word: &quot;tourist information centre&quot;,
                phonetic: &quot;/ˈtʊə.rɪst ˌɪn.fəˈmeɪ.ʃən ˌsen.tər/&quot;,
                meaning: &quot;旅游信息中心&quot;,
                example: &quot;Get a map at the tourist information centre.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tourist_information_centre--_gb_1.mp3&quot;,
                icon: &quot;fa-info-circle&quot;
            },
            {
                word: &quot;traffic&quot;,
                phonetic: &quot;/ˈtræf.ɪk/&quot;,
                meaning: &quot;交通&quot;,
                example: &quot;There was heavy traffic on the motorway.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/traffic--_gb_1.mp3&quot;,
                icon: &quot;fa-traffic-light&quot;
            },
            {
                word: &quot;traffic light&quot;,
                phonetic: &quot;/ˈtræf.ɪk ˌlaɪt/&quot;,
                meaning: &quot;交通信号灯&quot;,
                example: &quot;Stop at the red traffic light.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/traffic_light--_gb_1.mp3&quot;,
                icon: &quot;fa-traffic-light&quot;
            },
            {
                word: &quot;train&quot;,
                phonetic: &quot;/treɪn/&quot;,
                meaning: &quot;火车&quot;,
                example: &quot;The train arrives at platform 2.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/train--_gb_1.mp3&quot;,
                icon: &quot;fa-train&quot;
            },
            {
                word: &quot;tram&quot;,
                phonetic: &quot;/træm/&quot;,
                meaning: &quot;有轨电车&quot;,
                example: &quot;We took the tram to the city center.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tram--_gb_1.mp3&quot;,
                icon: &quot;fa-tram&quot;
            },
            {
                word: &quot;travel&quot;,
                phonetic: &quot;/ˈtræv.əl/&quot;,
                meaning: &quot;旅行&quot;,
                example: &quot;I love to travel to different countries.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/travel--_gb_1.mp3&quot;,
                icon: &quot;fa-suitcase-rolling&quot;
            },
            {
                word: &quot;trip&quot;,
                phonetic: &quot;/trɪp/&quot;,
                meaning: &quot;旅行&quot;,
                example: &quot;We took a trip to the mountains last weekend.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/trip--_gb_1.mp3&quot;,
                icon: &quot;fa-map-marked-alt&quot;
            },
            {
                word: &quot;tyre&quot;,
                phonetic: &quot;/ˈtaɪər/&quot;,
                meaning: &quot;轮胎&quot;,
                example: &quot;We need to change the car&#x27;s front tyre.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/tyre--_gb_1.mp3&quot;,
                icon: &quot;fa-circle&quot;
            },
            {
                word: &quot;underground&quot;,
                phonetic: &quot;/ˈʌn.də.ɡraʊnd/&quot;,
                meaning: &quot;地铁&quot;,
                example: &quot;The London Underground is called the Tube.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/underground--_gb_1.mp3&quot;,
                icon: &quot;fa-subway&quot;
            },
            {
                word: &quot;visit&quot;,
                phonetic: &quot;/ˈvɪz.ɪt/&quot;,
                meaning: &quot;参观&quot;,
                example: &quot;We plan to visit the museum tomorrow.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/visit--_gb_1.mp3&quot;,
                icon: &quot;fa-monument&quot;
            },
            {
                word: &quot;visitor&quot;,
                phonetic: &quot;/ˈvɪz.ɪ.tər/&quot;,
                meaning: &quot;游客&quot;,
                example: &quot;The museum has many visitors every day.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/visitor--_gb_1.mp3&quot;,
                icon: &quot;fa-user-friends&quot;
            },
            {
                word: &quot;way&quot;,
                phonetic: &quot;/weɪ/&quot;,
                meaning: &quot;道路；方式&quot;,
                example: &quot;Can you tell me the way to the station?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/way--_gb_1.mp3&quot;,
                icon: &quot;fa-directions&quot;
            },
            {
                word: &quot;wheel&quot;,
                phonetic: &quot;/wiːl/&quot;,
                meaning: &quot;轮子&quot;,
                example: &quot;The car has a flat wheel.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/wheel--_gb_1.mp3&quot;,
                icon: &quot;fa-cog&quot;
            },
            {
                word: &quot;window&quot;,
                phonetic: &quot;/ˈwɪn.dəʊ/&quot;,
                meaning: &quot;窗户&quot;,
                example: &quot;Look out the window to see the view.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/window--_gb_1.mp3&quot;,
                icon: &quot;fa-window-maximize&quot;
            }
        ];
        
        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;soundBtn&#x27;);
        const knowBtn = document.getElementById(&#x27;knowBtn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dontKnowBtn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsureBtn&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const progressText = document.getElementById(&#x27;progressText&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const reviewBtn = document.getElementById(&#x27;reviewBtn&#x27;);
        const resetBtn = document.getElementById(&#x27;resetBtn&#x27;);
        const completedMessage = document.getElementById(&#x27;completedMessage&#x27;);
        const notification = document.getElementById(&#x27;notification&#x27;);
        const travelIcon = document.querySelector(&#x27;.travel-icon i&#x27;);
        
        // 应用状态
        let learnedWords = [];
        let wordsToReview = [];
        let currentWordIndex = -1;
        let remainingWords = [...words];
        let audio = new Audio();
        
        // 初始化应用
        function init() {
            // 重置状态
            learnedWords = [];
            wordsToReview = [];
            remainingWords = [...words];
            
            // 更新UI
            reviewSection.style.display = &#x27;none&#x27;;
            completedMessage.style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            updateProgress();
            
            // 显示第一个单词
            nextWord();
        }
        
        // 显示下一个单词
        function nextWord() {
            if (remainingWords.length === 0) {
                // 所有单词都学完了
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            // 随机选择一个单词
            currentWordIndex = Math.floor(Math.random() * remainingWords.length);
            const word = remainingWords[currentWordIndex];
            
            // 更新卡片内容
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = `&quot;${word.example}&quot;`;
            travelIcon.className = `fas ${word.icon}`;
            
            // 确保卡片显示正面
            card.classList.remove(&#x27;flipped&#x27;);
            
            // 更新进度
            updateProgress();
        }
        
        // 更新进度条
        function updateProgress() {
            const learnedCount = words.length - remainingWords.length;
            const progress = (learnedCount / words.length) * 100;
            
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${learnedCount}/${words.length} 已学习`;
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            
            // 清空之前的复习单词
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 添加需要复习的单词
            wordsToReview.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.dataset.word = word.word;
                reviewWords.appendChild(wordEl);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completedMessage.style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;none&#x27;;
        }
        
        // 发音函数 - 使用预加载的MP3
        function speakWord() {
            const word = remainingWords[currentWordIndex];
            
            if (word.audio) {
                audio.src = word.audio;
                audio.play().catch(e =&gt; {
                    console.error(&quot;发音错误:&quot;, e);
                    showNotification();
                });
            } else {
                showNotification();
            }
        }
        
        // 显示通知
        function showNotification() {
            notification.textContent = &quot;发音功能需要网络连接&quot;;
            notification.style.display = &#x27;block&#x27;;
            notification.style.background = &#x27;#e74c3c&#x27;;
            
            setTimeout(() =&gt; {
                notification.style.display = &#x27;none&#x27;;
            }, 3000);
        }
        
        // 事件监听器
        card.addEventListener(&#x27;click&#x27;, () =&gt; {
            card.classList.toggle(&#x27;flipped&#x27;);
        });
        
        soundBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        reviewBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将复习单词设置为剩余单词
            remainingWords = [...wordsToReview];
            wordsToReview = [];
            
            // 隐藏复习部分
            reviewSection.style.display = &#x27;none&#x27;;
            
            // 开始复习
            nextWord();
        });
        
        resetBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 重新初始化应用
            init();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="24-天气" class="section">
      <div class="section-header">
        <h2>24 天气</h2>
        <div class="section-actions">
          <button onclick="openStandalone('24 天气.html')">打开原文件</button>
          <button onclick="toggleHeight('24-天气')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;天气主题单词闪卡&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: &#x27;Segoe UI&#x27;, Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #64b3f4, #c2e59c, #64b3f4);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .header {
            text-align: center;
            margin: 20px 0;
            color: white;
            width: 100%;
            padding: 10px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 15px;
            display: inline-block;
        }
        
        .header p {
            font-size: 1.1rem;
            max-width: 600px;
            margin: 15px auto 0;
            line-height: 1.6;
            color: #f8f9fa;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 800px;
        }
        
        /* 卡片容器 */
        .card-container {
            width: 100%;
            max-width: 500px;
            height: 350px;
            perspective: 1000px;
            margin: 20px 0;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            border-radius: 20px;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            text-align: center;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 3px solid #64b3f4;
        }
        
        .card-back {
            background: linear-gradient(45deg, #e3f2fd, #bbdefb);
            transform: rotateY(180deg);
            border: 3px solid #42a5f5;
        }
        
        .word {
            font-size: 3.0rem;
            font-weight: bold;
            color: #1e88e5;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .phonetic {
            font-size: 1.3rem;
            color: #6c757d;
            margin-bottom: 25px;
        }
        
        .meaning {
            font-size: 2.0rem;
            font-weight: bold;
            color: #1565c0;
            margin-bottom: 20px;
        }
        
        .example {
            font-size: 1.3rem;
            color: #2c3e50;
            line-height: 1.6;
            font-style: italic;
            padding: 0 20px;
        }
        
        .weather-icon {
            font-size: 4.0rem;
            margin-bottom: 20px;
            color: #42a5f5;
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .sound-btn {
            background: #42a5f5;
            color: white;
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        
        .sound-btn:hover {
            background: #1e88e5;
            transform: scale(1.05);
        }
        
        .sound-btn:active {
            transform: scale(0.95);
        }
        
        .hint {
            margin-top: 20px;
            color: #6c757d;
            font-size: 1rem;
            position: absolute;
            bottom: 20px;
        }
        
        /* 控制按钮 */
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            min-width: 150px;
            justify-content: center;
        }
        
        .btn i {
            font-size: 1.3rem;
        }
        
        .btn.know {
            background: linear-gradient(to right, #2ecc71, #1abc9c);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #f39c12, #e67e22);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        /* 进度条 */
        .progress-container {
            width: 100%;
            max-width: 500px;
            margin: 20px 0;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            height: 12px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #2ecc71, #3498db);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .progress-text {
            color: white;
            font-size: 1.1rem;
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        /* 复习模式 */
        .review-section {
            width: 100%;
            max-width: 700px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            display: none;
        }
        
        .review-section h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }
        
        .review-word {
            background: #42a5f5;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .review-word:hover {
            background: #1e88e5;
            transform: translateY(-3px);
        }
        
        .review-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 25px;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .card-container {
                height: 320px;
            }
            
            .word {
                font-size: 2.2rem;
            }
            
            .meaning {
                font-size: 1.6rem;
            }
            
            .example {
                font-size: 1.1rem;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1rem;
                min-width: 120px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .weather-icon {
                font-size: 3.0rem;
            }
        }
        
        @media (max-width: 480px) {
            .controls {
                gap: 10px;
            }
            
            .btn {
                padding: 12px 15px;
                min-width: 100px;
            }
            
            .card-container {
                height: 300px;
            }
            
            .word {
                font-size: 1.8rem;
            }
            
            .weather-icon {
                font-size: 2.5rem;
            }
        }
        
        .flip-icon {
            position: absolute;
            bottom: 15px;
            right: 15px;
            color: #6c757d;
            font-size: 1.2rem;
        }
        
        .completed-message {
            text-align: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            margin: 50px 0;
            display: none;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            background: rgba(0,0,0,0.3);
            padding: 30px;
            border-radius: 20px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #e74c3c;
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
        }
        
        .category-tag {
            position: absolute;
            top: 15px;
            left: 15px;
            background: #1e88e5;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: bold;
        }
        
        .weather-animation {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: -1;
        }
        
        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            animation: moveCloud linear infinite;
        }
        
        @keyframes moveCloud {
            0% { transform: translateX(-100px); }
            100% { transform: translateX(calc(100vw + 100px)); }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;weather-animation&quot; id=&quot;weatherAnimation&quot;&gt;&lt;/div&gt;
    
    &lt;div class=&quot;notification&quot; id=&quot;notification&quot;&gt;发音功能需要网络连接&lt;/div&gt;
    
    &lt;div class=&quot;header&quot;&gt;
        &lt;h1&gt;&lt;i class=&quot;fas fa-cloud-sun&quot;&gt;&lt;/i&gt; 天气主题单词闪卡&lt;/h1&gt;
        &lt;p&gt;学习天气相关词汇 • 点击卡片翻转查看释义 • 使用下方按钮标记学习状态&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progressBar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress-text&quot; id=&quot;progressText&quot;&gt;0/15 已学习&lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;category-tag&quot;&gt;天气现象&lt;/div&gt;
                    &lt;div class=&quot;weather-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-cloud&quot;&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;cloud&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/klaʊd/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;soundBtn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;hint&quot;&gt;点击卡片翻转查看释义和例句&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;云&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;White clouds floated across the blue sky.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-icon&quot;&gt;
                        &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 点击翻转
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;knowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dontKnowBtn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsureBtn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;completed-message&quot; id=&quot;completedMessage&quot;&gt;
            &lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 恭喜！您已完成所有单词学习！
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;reviewSection&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;p style=&quot;text-align: center; margin-bottom: 20px; color: #6c757d;&quot;&gt;
                以下是您标记为&quot;不认识&quot;或&quot;不确定&quot;的单词，请选择重新学习
            &lt;/p&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;reviewWords&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;review-buttons&quot;&gt;
                &lt;button class=&quot;btn know&quot; id=&quot;reviewBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-play&quot;&gt;&lt;/i&gt; 开始复习
                &lt;/button&gt;
                &lt;button class=&quot;btn dont-know&quot; id=&quot;resetBtn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; 重新学习全部
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;script&gt;
        // 单词数据 - 天气主题
        const words = [
            {
                word: &quot;cloud&quot;,
                phonetic: &quot;/klaʊd/&quot;,
                meaning: &quot;云&quot;,
                example: &quot;White clouds floated across the blue sky.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cloud--_gb_1.mp3&quot;,
                icon: &quot;fa-cloud&quot;
            },
            {
                word: &quot;cloudy&quot;,
                phonetic: &quot;/ˈklaʊ.di/&quot;,
                meaning: &quot;多云的&quot;,
                example: &quot;It&#x27;s a cloudy day today, but no rain is expected.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cloudy--_gb_1.mp3&quot;,
                icon: &quot;fa-cloud&quot;
            },
            {
                word: &quot;cold&quot;,
                phonetic: &quot;/kəʊld/&quot;,
                meaning: &quot;冷的&quot;,
                example: &quot;Remember to wear a coat; it&#x27;s cold outside.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/cold--_gb_1.mp3&quot;,
                icon: &quot;fa-temperature-low&quot;
            },
            {
                word: &quot;fog&quot;,
                phonetic: &quot;/fɒɡ/&quot;,
                meaning: &quot;雾&quot;,
                example: &quot;The airport was closed due to thick fog.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/fog--_gb_1.mp3&quot;,
                icon: &quot;fa-smog&quot;
            },
            {
                word: &quot;foggy&quot;,
                phonetic: &quot;/ˈfɒɡ.i/&quot;,
                meaning: &quot;有雾的&quot;,
                example: &quot;Driving can be dangerous on foggy mornings.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/foggy--_gb_1.mp3&quot;,
                icon: &quot;fa-smog&quot;
            },
            {
                word: &quot;hot&quot;,
                phonetic: &quot;/hɒt/&quot;,
                meaning: &quot;热的&quot;,
                example: &quot;It&#x27;s too hot to go outside in the afternoon.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/hot--_gb_1.mp3&quot;,
                icon: &quot;fa-temperature-high&quot;
            },
            {
                word: &quot;ice&quot;,
                phonetic: &quot;/aɪs/&quot;,
                meaning: &quot;冰&quot;,
                example: &quot;The roads are covered with ice after the freezing rain.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/ice--_gb_1.mp3&quot;,
                icon: &quot;fa-icicles&quot;
            },
            {
                word: &quot;rain&quot;,
                phonetic: &quot;/reɪn/&quot;,
                meaning: &quot;雨&quot;,
                example: &quot;Don&#x27;t forget your umbrella; it might rain later.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/rain--_gb_1.mp3&quot;,
                icon: &quot;fa-cloud-rain&quot;
            },
            {
                word: &quot;snow&quot;,
                phonetic: &quot;/snəʊ/&quot;,
                meaning: &quot;雪&quot;,
                example: &quot;Children love to play in the snow.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/snow--_gb_1.mp3&quot;,
                icon: &quot;fa-snowflake&quot;
            },
            {
                word: &quot;storm&quot;,
                phonetic: &quot;/stɔːm/&quot;,
                meaning: &quot;风暴&quot;,
                example: &quot;The storm caused power outages throughout the city.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/storm--_gb_1.mp3&quot;,
                icon: &quot;fa-wind&quot;
            },
            {
                word: &quot;sun&quot;,
                phonetic: &quot;/sʌn/&quot;,
                meaning: &quot;太阳&quot;,
                example: &quot;The sun rises in the east and sets in the west.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sun--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;sunny&quot;,
                phonetic: &quot;/ˈsʌn.i/&quot;,
                meaning: &quot;晴朗的&quot;,
                example: &quot;It&#x27;s a beautiful sunny day for a picnic.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/sunny--_gb_1.mp3&quot;,
                icon: &quot;fa-sun&quot;
            },
            {
                word: &quot;thunderstorm&quot;,
                phonetic: &quot;/ˈθʌn.də.stɔːm/&quot;,
                meaning: &quot;雷暴&quot;,
                example: &quot;The thunderstorm last night was very loud.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/thunderstorm--_gb_1.mp3&quot;,
                icon: &quot;fa-bolt&quot;
            },
            {
                word: &quot;warm&quot;,
                phonetic: &quot;/wɔːm/&quot;,
                meaning: &quot;温暖的&quot;,
                example: &quot;Spring brings warm weather and blooming flowers.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/warm--_gb_1.mp3&quot;,
                icon: &quot;fa-temperature-high&quot;
            },
            {
                word: &quot;weather&quot;,
                phonetic: &quot;/ˈweð.ər/&quot;,
                meaning: &quot;天气&quot;,
                example: &quot;What&#x27;s the weather forecast for tomorrow?&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/weather--_gb_1.mp3&quot;,
                icon: &quot;fa-cloud-sun&quot;
            },
            {
                word: &quot;wet&quot;,
                phonetic: &quot;/wet/&quot;,
                meaning: &quot;湿的&quot;,
                example: &quot;The grass is wet from the morning dew.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/wet--_gb_1.mp3&quot;,
                icon: &quot;fa-umbrella&quot;
            },
            {
                word: &quot;wind&quot;,
                phonetic: &quot;/wɪnd/&quot;,
                meaning: &quot;风&quot;,
                example: &quot;The wind is strong enough to fly a kite.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/wind--_gb_1.mp3&quot;,
                icon: &quot;fa-wind&quot;
            },
            {
                word: &quot;windy&quot;,
                phonetic: &quot;/ˈwɪn.di/&quot;,
                meaning: &quot;有风的&quot;,
                example: &quot;It&#x27;s too windy to have a picnic on the beach.&quot;,
                audio: &quot;https://ssl.gstatic.com/dictionary/static/sounds/20200429/windy--_gb_1.mp3&quot;,
                icon: &quot;fa-wind&quot;
            }
        ];
        
        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;soundBtn&#x27;);
        const knowBtn = document.getElementById(&#x27;knowBtn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dontKnowBtn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsureBtn&#x27;);
        const progressBar = document.getElementById(&#x27;progressBar&#x27;);
        const progressText = document.getElementById(&#x27;progressText&#x27;);
        const reviewSection = document.getElementById(&#x27;reviewSection&#x27;);
        const reviewWords = document.getElementById(&#x27;reviewWords&#x27;);
        const reviewBtn = document.getElementById(&#x27;reviewBtn&#x27;);
        const resetBtn = document.getElementById(&#x27;resetBtn&#x27;);
        const completedMessage = document.getElementById(&#x27;completedMessage&#x27;);
        const notification = document.getElementById(&#x27;notification&#x27;);
        const weatherIcon = document.querySelector(&#x27;.weather-icon i&#x27;);
        const weatherAnimation = document.getElementById(&#x27;weatherAnimation&#x27;);
        
        // 应用状态
        let learnedWords = [];
        let wordsToReview = [];
        let currentWordIndex = -1;
        let remainingWords = [...words];
        let audio = new Audio();
        
        // 创建天气动画效果
        function createWeatherAnimation() {
            // 清除现有动画
            weatherAnimation.innerHTML = &#x27;&#x27;;
            
            // 根据当前单词创建动画
            if (currentWordIndex &gt;= 0 &amp;&amp; currentWordIndex &lt; words.length) {
                const currentWord = words[currentWordIndex].word.toLowerCase();
                
                if (currentWord.includes(&#x27;cloud&#x27;) || currentWord.includes(&#x27;fog&#x27;)) {
                    createClouds();
                } else if (currentWord.includes(&#x27;rain&#x27;) || currentWord.includes(&#x27;storm&#x27;)) {
                    createRain();
                } else if (currentWord.includes(&#x27;snow&#x27;)) {
                    createSnow();
                } else if (currentWord.includes(&#x27;sun&#x27;)) {
                    createSun();
                } else if (currentWord.includes(&#x27;wind&#x27;)) {
                    createWind();
                }
            }
        }
        
        function createClouds() {
            for (let i = 0; i &lt; 5; i++) {
                const cloud = document.createElement(&#x27;div&#x27;);
                cloud.className = &#x27;cloud&#x27;;
                cloud.style.width = `${Math.random() * 100 + 50}px`;
                cloud.style.height = `${Math.random() * 40 + 20}px`;
                cloud.style.top = `${Math.random() * 30 + 10}%`;
                cloud.style.left = `${Math.random() * 100}%`;
                cloud.style.animationDuration = `${Math.random() * 30 + 30}s`;
                cloud.style.animationDelay = `${Math.random() * 5}s`;
                weatherAnimation.appendChild(cloud);
            }
        }
        
        function createRain() {
            for (let i = 0; i &lt; 50; i++) {
                const drop = document.createElement(&#x27;div&#x27;);
                drop.className = &#x27;rain-drop&#x27;;
                drop.style.position = &#x27;absolute&#x27;;
                drop.style.width = &#x27;2px&#x27;;
                drop.style.height = &#x27;10px&#x27;;
                drop.style.background = &#x27;rgba(255, 255, 255, 0.7)&#x27;;
                drop.style.left = `${Math.random() * 100}%`;
                drop.style.top = &#x27;-10px&#x27;;
                drop.style.animation = `fall linear ${Math.random() * 0.5 + 0.5}s infinite`;
                drop.style.animationDelay = `${Math.random() * 2}s`;
                weatherAnimation.appendChild(drop);
                
                // 添加动画
                const style = document.createElement(&#x27;style&#x27;);
                style.textContent = `
                    @keyframes fall {
                        0% { transform: translateY(0); opacity: 0; }
                        10% { opacity: 1; }
                        90% { opacity: 1; }
                        100% { transform: translateY(100vh); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
        
        function createSnow() {
            for (let i = 0; i &lt; 50; i++) {
                const flake = document.createElement(&#x27;div&#x27;);
                flake.className = &#x27;snow-flake&#x27;;
                flake.style.position = &#x27;absolute&#x27;;
                flake.style.width = &#x27;8px&#x27;;
                flake.style.height = &#x27;8px&#x27;;
                flake.style.background = &#x27;white&#x27;;
                flake.style.borderRadius = &#x27;50%&#x27;;
                flake.style.left = `${Math.random() * 100}%`;
                flake.style.top = &#x27;-10px&#x27;;
                flake.style.animation = `snowFall linear ${Math.random() * 5 + 5}s infinite`;
                flake.style.animationDelay = `${Math.random() * 5}s`;
                weatherAnimation.appendChild(flake);
                
                // 添加动画
                const style = document.createElement(&#x27;style&#x27;);
                style.textContent = `
                    @keyframes snowFall {
                        0% { transform: translateY(0) translateX(0); opacity: 0; }
                        10% { opacity: 1; }
                        90% { opacity: 1; }
                        100% { transform: translateY(100vh) translateX(${Math.random() * 100 - 50}px); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
        
        function createSun() {
            const sun = document.createElement(&#x27;div&#x27;);
            sun.className = &#x27;sun&#x27;;
            sun.style.position = &#x27;absolute&#x27;;
            sun.style.width = &#x27;100px&#x27;;
            sun.style.height = &#x27;100px&#x27;;
            sun.style.background = &#x27;radial-gradient(circle, #ffff00, #ffcc00)&#x27;;
            sun.style.borderRadius = &#x27;50%&#x27;;
            sun.style.top = &#x27;20px&#x27;;
            sun.style.right = &#x27;20px&#x27;;
            sun.style.boxShadow = &#x27;0 0 50px #ffcc00&#x27;;
            sun.style.animation = &#x27;pulse 3s infinite alternate&#x27;;
            weatherAnimation.appendChild(sun);
            
            // 添加动画
            const style = document.createElement(&#x27;style&#x27;);
            style.textContent = `
                @keyframes pulse {
                    0% { transform: scale(1); box-shadow: 0 0 50px #ffcc00; }
                    100% { transform: scale(1.1); box-shadow: 0 0 70px #ffcc00; }
                }
            `;
            document.head.appendChild(style);
        }
        
        function createWind() {
            for (let i = 0; i &lt; 10; i++) {
                const windLine = document.createElement(&#x27;div&#x27;);
                windLine.className = &#x27;wind-line&#x27;;
                windLine.style.position = &#x27;absolute&#x27;;
                windLine.style.width = &#x27;100px&#x27;;
                windLine.style.height = &#x27;2px&#x27;;
                windLine.style.background = &#x27;rgba(255, 255, 255, 0.5)&#x27;;
                windLine.style.left = `${Math.random() * 100}%`;
                windLine.style.top = `${Math.random() * 100}%`;
                windLine.style.animation = `wind linear ${Math.random() * 2 + 1}s infinite`;
                windLine.style.animationDelay = `${Math.random() * 2}s`;
                weatherAnimation.appendChild(windLine);
                
                // 添加动画
                const style = document.createElement(&#x27;style&#x27;);
                style.textContent = `
                    @keyframes wind {
                        0% { transform: translateX(-100px); opacity: 0; }
                        10% { opacity: 1; }
                        90% { opacity: 1; }
                        100% { transform: translateX(100px); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        }
        
        // 初始化应用
        function init() {
            // 重置状态
            learnedWords = [];
            wordsToReview = [];
            remainingWords = [...words];
            
            // 更新UI
            reviewSection.style.display = &#x27;none&#x27;;
            completedMessage.style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;flex&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;block&#x27;;
            updateProgress();
            
            // 显示第一个单词
            nextWord();
        }
        
        // 显示下一个单词
        function nextWord() {
            if (remainingWords.length === 0) {
                // 所有单词都学完了
                if (wordsToReview.length &gt; 0) {
                    showReviewSection();
                } else {
                    showCompletionMessage();
                }
                return;
            }
            
            // 随机选择一个单词
            currentWordIndex = Math.floor(Math.random() * remainingWords.length);
            const word = remainingWords[currentWordIndex];
            
            // 更新卡片内容
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = `&quot;${word.example}&quot;`;
            weatherIcon.className = `fas ${word.icon}`;
            
            // 确保卡片显示正面
            card.classList.remove(&#x27;flipped&#x27;);
            
            // 创建天气动画
            createWeatherAnimation();
            
            // 更新进度
            updateProgress();
        }
        
        // 更新进度条
        function updateProgress() {
            const learnedCount = words.length - remainingWords.length;
            const progress = (learnedCount / words.length) * 100;
            
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${learnedCount}/${words.length} 已学习`;
        }
        
        // 显示复习部分
        function showReviewSection() {
            reviewSection.style.display = &#x27;block&#x27;;
            
            // 清空之前的复习单词
            reviewWords.innerHTML = &#x27;&#x27;;
            
            // 添加需要复习的单词
            wordsToReview.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.dataset.word = word.word;
                reviewWords.appendChild(wordEl);
            });
        }
        
        // 显示完成消息
        function showCompletionMessage() {
            completedMessage.style.display = &#x27;block&#x27;;
            document.querySelector(&#x27;.controls&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.card-container&#x27;).style.display = &#x27;none&#x27;;
            document.querySelector(&#x27;.progress-container&#x27;).style.display = &#x27;none&#x27;;
            reviewSection.style.display = &#x27;none&#x27;;
        }
        
        // 发音函数 - 使用预加载的MP3
        function speakWord() {
            const word = remainingWords[currentWordIndex];
            
            if (word.audio) {
                audio.src = word.audio;
                audio.play().catch(e =&gt; {
                    console.error(&quot;发音错误:&quot;, e);
                    showNotification();
                });
            } else {
                showNotification();
            }
        }
        
        // 显示通知
        function showNotification() {
            notification.textContent = &quot;发音功能需要网络连接&quot;;
            notification.style.display = &#x27;block&#x27;;
            notification.style.background = &#x27;#e74c3c&#x27;;
            
            setTimeout(() =&gt; {
                notification.style.display = &#x27;none&#x27;;
            }, 3000);
        }
        
        // 事件监听器
        card.addEventListener(&#x27;click&#x27;, () =&gt; {
            card.classList.toggle(&#x27;flipped&#x27;);
        });
        
        soundBtn.addEventListener(&#x27;click&#x27;, (e) =&gt; {
            e.stopPropagation(); // 防止触发卡片翻转
            speakWord();
        });
        
        knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            const word = remainingWords[currentWordIndex];
            
            // 添加到复习列表（如果尚未添加）
            if (!wordsToReview.some(w =&gt; w.word === word.word)) {
                wordsToReview.push(word);
            }
            
            // 从剩余单词中移除
            remainingWords.splice(currentWordIndex, 1);
            nextWord();
        });
        
        reviewBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 将复习单词设置为剩余单词
            remainingWords = [...wordsToReview];
            wordsToReview = [];
            
            // 隐藏复习部分
            reviewSection.style.display = &#x27;none&#x27;;
            
            // 开始复习
            nextWord();
        });
        
        resetBtn.addEventListener(&#x27;click&#x27;, () =&gt; {
            // 重新初始化应用
            init();
        });
        
        // 初始化应用
        init();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <section id="25-工作和职业" class="section">
      <div class="section-header">
        <h2>25 工作和职业</h2>
        <div class="section-actions">
          <button onclick="openStandalone('25 工作和职业.html')">打开原文件</button>
          <button onclick="toggleHeight('25-工作和职业')">切换高度</button>
        </div>
      </div>
      <iframe class="card-frame" srcdoc="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;单词闪卡记忆系统&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: &#x27;Roboto&#x27;, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding: 30px;
            position: relative;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #2c3e50;
            font-size: 2.5rem;
            margin-bottom: 10px;
            position: relative;
            display: inline-block;
        }
        
        h1:after {
            content: &#x27;&#x27;;
            display: block;
            width: 70%;
            height: 4px;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            margin: 10px auto 0;
            border-radius: 2px;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            background: rgba(106, 17, 203, 0.1);
            padding: 15px;
            border-radius: 12px;
            margin: 20px 0;
        }
        
        .stat-card {
            text-align: center;
            padding: 10px;
        }
        
        .stat-card h3 {
            font-size: 1.2rem;
            color: #6a11cb;
            margin-bottom: 5px;
        }
        
        .stat-card p {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2c3e50;
        }
        
        .card-container {
            perspective: 1500px;
            height: 350px;
            margin: 30px 0;
            position: relative;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            border-radius: 20px;
        }
        
        .card-front {
            background: linear-gradient(45deg, #ffffff, #f8f9fa);
            border: 2px solid #e0e0e0;
        }
        
        .card-back {
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            color: white;
            transform: rotateY(180deg);
        }
        
        .word {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #2c3e50;
            text-align: center;
        }
        
        .phonetic {
            font-size: 1.5rem;
            color: #6c757d;
            margin-bottom: 25px;
        }
        
        .sound-btn {
            background: #6a11cb;
            color: white;
            border: none;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
            transition: all 0.3s ease;
        }
        
        .sound-btn:hover {
            background: #2575fc;
            transform: scale(1.05);
        }
        
        .meaning {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .example {
            font-size: 1.4rem;
            font-style: italic;
            text-align: center;
            line-height: 1.6;
            max-width: 90%;
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .btn {
            flex: 1;
            margin: 0 10px;
            padding: 15px 20px;
            border: none;
            border-radius: 12px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .btn i {
            margin-right: 10px;
        }
        
        .btn.know {
            background: linear-gradient(to right, #00b09b, #96c93d);
            color: white;
        }
        
        .btn.dont-know {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            color: white;
        }
        
        .btn.unsure {
            background: linear-gradient(to right, #ff9800, #ffc107);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .review-section {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 25px;
            margin-top: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: none;
        }
        
        .review-section h2 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .review-words {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .review-word {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .review-word:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .review-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .review-btn {
            padding: 12px 25px;
            background: #2c3e50;
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .review-btn:hover {
            background: #1a2530;
            transform: translateY(-3px);
        }
        
        .instructions {
            text-align: center;
            margin-top: 15px;
            color: #6c757d;
            font-size: 1rem;
        }
        
        .flip-hint {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            color: #6c757d;
            font-size: 0.9rem;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        .progress-container {
            width: 100%;
            background: #e0e0e0;
            border-radius: 10px;
            margin: 20px 0;
            height: 12px;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, #00b09b, #96c93d);
            border-radius: 10px;
            width: 0%;
            transition: width 0.5s ease;
        }
        
        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
                gap: 10px;
            }
            
            .btn {
                margin: 5px 0;
            }
            
            .card-container {
                height: 300px;
            }
            
            .word {
                font-size: 2.8rem;
            }
            
            .meaning {
                font-size: 2rem;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;header&gt;
            &lt;h1&gt;&lt;i class=&quot;fas fa-book-open&quot;&gt;&lt;/i&gt; 单词闪卡记忆系统&lt;/h1&gt;
            &lt;p&gt;翻转卡片查看释义，根据记忆程度选择按钮&lt;/p&gt;
        &lt;/header&gt;
        
        &lt;div class=&quot;stats&quot;&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;剩余单词&lt;/h3&gt;
                &lt;p id=&quot;remaining-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;已掌握&lt;/h3&gt;
                &lt;p id=&quot;known-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;stat-card&quot;&gt;
                &lt;h3&gt;需复习&lt;/h3&gt;
                &lt;p id=&quot;review-count&quot;&gt;0&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;progress-container&quot;&gt;
            &lt;div class=&quot;progress-bar&quot; id=&quot;progress-bar&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;card-container&quot;&gt;
            &lt;div class=&quot;card&quot; id=&quot;card&quot;&gt;
                &lt;div class=&quot;card-face card-front&quot;&gt;
                    &lt;div class=&quot;word&quot; id=&quot;word&quot;&gt;actor&lt;/div&gt;
                    &lt;div class=&quot;phonetic&quot; id=&quot;phonetic&quot;&gt;/ˈæktər/&lt;/div&gt;
                    &lt;button class=&quot;sound-btn&quot; id=&quot;sound-btn&quot;&gt;
                        &lt;i class=&quot;fas fa-volume-up&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片翻转查看释义&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;card-face card-back&quot;&gt;
                    &lt;div class=&quot;meaning&quot; id=&quot;meaning&quot;&gt;演员&lt;/div&gt;
                    &lt;div class=&quot;example&quot; id=&quot;example&quot;&gt;&quot;Tom Hanks is a famous American actor.&quot;&lt;/div&gt;
                    &lt;div class=&quot;flip-hint&quot;&gt;点击卡片返回单词&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;controls&quot;&gt;
            &lt;button class=&quot;btn know&quot; id=&quot;know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt; 我认识
            &lt;/button&gt;
            &lt;button class=&quot;btn unsure&quot; id=&quot;unsure-btn&quot;&gt;
                &lt;i class=&quot;fas fa-question-circle&quot;&gt;&lt;/i&gt; 不确定
            &lt;/button&gt;
            &lt;button class=&quot;btn dont-know&quot; id=&quot;dont-know-btn&quot;&gt;
                &lt;i class=&quot;fas fa-times-circle&quot;&gt;&lt;/i&gt; 不认识
            &lt;/button&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;review-section&quot; id=&quot;review-section&quot;&gt;
            &lt;h2&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 需要复习的单词&lt;/h2&gt;
            &lt;div class=&quot;review-words&quot; id=&quot;review-words&quot;&gt;
                &lt;!-- 复习单词将在这里显示 --&gt;
            &lt;/div&gt;
            &lt;div class=&quot;review-controls&quot;&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;review-all-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-sync&quot;&gt;&lt;/i&gt; 全部复习
                &lt;/button&gt;
                &lt;button class=&quot;review-btn&quot; id=&quot;continue-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-arrow-right&quot;&gt;&lt;/i&gt; 继续学习
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;instructions&quot;&gt;
            &lt;p&gt;&lt;i class=&quot;fas fa-info-circle&quot;&gt;&lt;/i&gt; 提示: 点击卡片可以翻转，点击喇叭图标可听发音&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // 单词数据库
        const words = [
            { word: &quot;actor&quot;, phonetic: &quot;/ˈæktər/&quot;, meaning: &quot;演员&quot;, example: &quot;Tom Hanks is a famous American actor.&quot; },
            { word: &quot;artist&quot;, phonetic: &quot;/ˈɑːrtɪst/&quot;, meaning: &quot;艺术家&quot;, example: &quot;Vincent van Gogh was a brilliant artist.&quot; },
            { word: &quot;boss&quot;, phonetic: &quot;/bɒs/&quot;, meaning: &quot;老板&quot;, example: &quot;My boss gave me a promotion last week.&quot; },
            { word: &quot;break&quot;, phonetic: &quot;/breɪk/&quot;, meaning: &quot;休息；打破&quot;, example: &quot;Let&#x27;s take a break after two hours of work.&quot; },
            { word: &quot;business&quot;, phonetic: &quot;/ˈbɪznəs/&quot;, meaning: &quot;商业；生意&quot;, example: &quot;She started her own business last year.&quot; },
            { word: &quot;business person&quot;, phonetic: &quot;/ˈbɪznəs pɜːrsn/&quot;, meaning: &quot;商人&quot;, example: &quot;As a business person, he travels frequently.&quot; },
            { word: &quot;businessman&quot;, phonetic: &quot;/ˈbɪznəsmæn/&quot;, meaning: &quot;商人（男）&quot;, example: &quot;The businessman closed an important deal.&quot; },
            { word: &quot;businesswoman&quot;, phonetic: &quot;/ˈbɪznəswʊmən/&quot;, meaning: &quot;商人（女）&quot;, example: &quot;She is a successful businesswoman.&quot; },
            { word: &quot;chemist&quot;, phonetic: &quot;/ˈkemɪst/&quot;, meaning: &quot;化学家；药剂师&quot;, example: &quot;The chemist developed a new formula.&quot; },
            { word: &quot;cleaner&quot;, phonetic: &quot;/ˈkliːnər/&quot;, meaning: &quot;清洁工&quot;, example: &quot;The cleaner comes every Tuesday.&quot; },
            { word: &quot;coach&quot;, phonetic: &quot;/koʊtʃ/&quot;, meaning: &quot;教练；长途汽车&quot;, example: &quot;Our football coach is very experienced.&quot; },
            { word: &quot;company&quot;, phonetic: &quot;/ˈkʌmpəni/&quot;, meaning: &quot;公司&quot;, example: &quot;He works for a technology company.&quot; },
            { word: &quot;computer&quot;, phonetic: &quot;/kəmˈpjuːtər/&quot;, meaning: &quot;计算机&quot;, example: &quot;I use my computer for work and entertainment.&quot; },
            { word: &quot;cook&quot;, phonetic: &quot;/kʊk/&quot;, meaning: &quot;厨师；烹饪&quot;, example: &quot;My father is an excellent cook.&quot; },
            { word: &quot;customer&quot;, phonetic: &quot;/ˈkʌstəmər/&quot;, meaning: &quot;顾客&quot;, example: &quot;The customer was satisfied with the service.&quot; },
            { word: &quot;dentist&quot;, phonetic: &quot;/ˈdentɪst/&quot;, meaning: &quot;牙医&quot;, example: &quot;I visit my dentist twice a year.&quot; },
            { word: &quot;desk&quot;, phonetic: &quot;/desk/&quot;, meaning: &quot;书桌&quot;, example: &quot;There is a lamp on my desk.&quot; },
            { word: &quot;diary&quot;, phonetic: &quot;/ˈdaɪəri/&quot;, meaning: &quot;日记&quot;, example: &quot;She writes in her diary every night.&quot; },
            { word: &quot;diploma&quot;, phonetic: &quot;/dɪˈploʊmə/&quot;, meaning: &quot;文凭&quot;, example: &quot;He received his diploma last month.&quot; },
            { word: &quot;doctor&quot;, phonetic: &quot;/ˈdɒktər/&quot;, meaning: &quot;医生&quot;, example: &quot;The doctor examined the patient carefully.&quot; },
            { word: &quot;driver&quot;, phonetic: &quot;/ˈdraɪvər/&quot;, meaning: &quot;司机&quot;, example: &quot;The taxi driver knew the city well.&quot; },
            { word: &quot;earn&quot;, phonetic: &quot;/ɜːrn/&quot;, meaning: &quot;赚得&quot;, example: &quot;She earns a good salary at her job.&quot; },
            { word: &quot;email&quot;, phonetic: &quot;/ˈiːmeɪl/&quot;, meaning: &quot;电子邮件；发邮件&quot;, example: &quot;Please send me an email with the details.&quot; },
            { word: &quot;engineer&quot;, phonetic: &quot;/ˌendʒɪˈnɪər/&quot;, meaning: &quot;工程师&quot;, example: &quot;My sister is a software engineer.&quot; },
            { word: &quot;explorer&quot;, phonetic: &quot;/ɪkˈsplɔːrər/&quot;, meaning: &quot;探险家&quot;, example: &quot;Christopher Columbus was a famous explorer.&quot; },
            { word: &quot;factory&quot;, phonetic: &quot;/ˈfæktri/&quot;, meaning: &quot;工厂&quot;, example: &quot;The car factory employs thousands of workers.&quot; },
            { word: &quot;farm&quot;, phonetic: &quot;/fɑːrm/&quot;, meaning: &quot;农场&quot;, example: &quot;They grow vegetables on their farm.&quot; },
            { word: &quot;farmer&quot;, phonetic: &quot;/ˈfɑːrmər/&quot;, meaning: &quot;农民&quot;, example: &quot;The farmer works from dawn to dusk.&quot; },
            { word: &quot;footballer&quot;, phonetic: &quot;/ˈfʊtbɔːlər/&quot;, meaning: &quot;足球运动员&quot;, example: &quot;He is a professional footballer.&quot; },
            { word: &quot;guest&quot;, phonetic: &quot;/ɡest/&quot;, meaning: &quot;客人&quot;, example: &quot;We have guests coming for dinner tonight.&quot; },
            { word: &quot;guide&quot;, phonetic: &quot;/ɡaɪd/&quot;, meaning: &quot;指南；向导&quot;, example: &quot;The tour guide explained the history of the castle.&quot; },
            { word: &quot;instructions&quot;, phonetic: &quot;/ɪnˈstrʌkʃnz/&quot;, meaning: &quot;说明书&quot;, example: &quot;Please read the instructions carefully.&quot; },
            { word: &quot;job&quot;, phonetic: &quot;/dʒɒb/&quot;, meaning: &quot;工作&quot;, example: &quot;She found a new job in marketing.&quot; },
            { word: &quot;journalist&quot;, phonetic: &quot;/ˈdʒɜːnəlɪst/&quot;, meaning: &quot;记者&quot;, example: &quot;The journalist wrote an interesting article.&quot; },
            { word: &quot;king&quot;, phonetic: &quot;/kɪŋ/&quot;, meaning: &quot;国王&quot;, example: &quot;The king ruled for over 50 years.&quot; },
            { word: &quot;letter&quot;, phonetic: &quot;/ˈletər/&quot;, meaning: &quot;信&quot;, example: &quot;I received a letter from my friend.&quot; },
            { word: &quot;manager&quot;, phonetic: &quot;/ˈmænɪdʒər/&quot;, meaning: &quot;经理&quot;, example: &quot;The store manager handles all complaints.&quot; },
            { word: &quot;mechanic&quot;, phonetic: &quot;/məˈkænɪk/&quot;, meaning: &quot;机械师&quot;, example: &quot;The mechanic fixed my car quickly.&quot; },
            { word: &quot;meeting&quot;, phonetic: &quot;/ˈmiːtɪŋ/&quot;, meaning: &quot;会议&quot;, example: &quot;We have a meeting at 10 AM tomorrow.&quot; },
            { word: &quot;message&quot;, phonetic: &quot;/ˈmesɪdʒ/&quot;, meaning: &quot;消息&quot;, example: &quot;I left a message on your voicemail.&quot; },
            { word: &quot;musician&quot;, phonetic: &quot;/mjuˈzɪʃn/&quot;, meaning: &quot;音乐家&quot;, example: &quot;She is a talented musician who plays the piano.&quot; },
            { word: &quot;nurse&quot;, phonetic: &quot;/nɜːrs/&quot;, meaning: &quot;护士&quot;, example: &quot;The nurse took care of the patients.&quot; },
            { word: &quot;occupation&quot;, phonetic: &quot;/ˌɒkjuˈpeɪʃn/&quot;, meaning: &quot;职业&quot;, example: &quot;What is your occupation?&quot; },
            { word: &quot;office&quot;, phonetic: &quot;/ˈɒfɪs/&quot;, meaning: &quot;办公室&quot;, example: &quot;His office is on the fifth floor.&quot; },
            { word: &quot;painter&quot;, phonetic: &quot;/ˈpeɪntər/&quot;, meaning: &quot;画家&quot;, example: &quot;Picasso was a famous Spanish painter.&quot; },
            { word: &quot;photographer&quot;, phonetic: &quot;/fəˈtɒɡrəfər/&quot;, meaning: &quot;摄影师&quot;, example: &quot;The photographer took beautiful wedding photos.&quot; },
            { word: &quot;pilot&quot;, phonetic: &quot;/ˈpaɪlət/&quot;, meaning: &quot;飞行员&quot;, example: &quot;The pilot announced that we would be landing soon.&quot; },
            { word: &quot;police officer&quot;, phonetic: &quot;/pəˈliːs ɒfɪsər/&quot;, meaning: &quot;警察&quot;, example: &quot;The police officer helped us find our way.&quot; },
            { word: &quot;queen&quot;, phonetic: &quot;/kwiːn/&quot;, meaning: &quot;女王&quot;, example: &quot;Queen Elizabeth II reigned for 70 years.&quot; },
            { word: &quot;receptionist&quot;, phonetic: &quot;/rɪˈsepʃənɪst/&quot;, meaning: &quot;接待员&quot;, example: &quot;The receptionist greeted us with a smile.&quot; },
            { word: &quot;secretary&quot;, phonetic: &quot;/ˈsekrətri/&quot;, meaning: &quot;秘书&quot;, example: &quot;The secretary scheduled all the appointments.&quot; },
            { word: &quot;shop assistant&quot;, phonetic: &quot;/ˈʃɒp əˌsɪstənt/&quot;, meaning: &quot;店员&quot;, example: &quot;The shop assistant helped me find my size.&quot; },
            { word: &quot;shopper&quot;, phonetic: &quot;/ˈʃɒpər/&quot;, meaning: &quot;购物者&quot;, example: &quot;The shoppers crowded the mall during the sale.&quot; },
            { word: &quot;singer&quot;, phonetic: &quot;/ˈsɪŋər/&quot;, meaning: &quot;歌手&quot;, example: &quot;The singer performed her latest song.&quot; },
            { word: &quot;staff&quot;, phonetic: &quot;/stɑːf/&quot;, meaning: &quot;全体员工&quot;, example: &quot;The hotel staff were very helpful.&quot; },
            { word: &quot;student&quot;, phonetic: &quot;/ˈstjuːdnt/&quot;, meaning: &quot;学生&quot;, example: &quot;She is a medical student at the university.&quot; },
            { word: &quot;teacher&quot;, phonetic: &quot;/ˈtiːtʃər/&quot;, meaning: &quot;老师&quot;, example: &quot;My math teacher explains things very clearly.&quot; },
            { word: &quot;tennis player&quot;, phonetic: &quot;/ˈtenɪs pleɪər/&quot;, meaning: &quot;网球运动员&quot;, example: &quot;Serena Williams is a famous tennis player.&quot; },
            { word: &quot;tour guide&quot;, phonetic: &quot;/ˈtʊər ɡaɪd/&quot;, meaning: &quot;导游&quot;, example: &quot;Our tour guide told us many interesting facts.&quot; },
            { word: &quot;uniform&quot;, phonetic: &quot;/ˈjuːnɪfɔːm/&quot;, meaning: &quot;制服&quot;, example: &quot;The students wear school uniforms every day.&quot; },
            { word: &quot;waiter&quot;, phonetic: &quot;/ˈweɪtər/&quot;, meaning: &quot;服务员（男）&quot;, example: &quot;The waiter took our order promptly.&quot; },
            { word: &quot;waitress&quot;, phonetic: &quot;/ˈweɪtrəs/&quot;, meaning: &quot;服务员（女）&quot;, example: &quot;The waitress brought us the menu.&quot; },
            { word: &quot;work&quot;, phonetic: &quot;/wɜːk/&quot;, meaning: &quot;工作&quot;, example: &quot;I have a lot of work to finish today.&quot; },
            { word: &quot;worker&quot;, phonetic: &quot;/ˈwɜːkər/&quot;, meaning: &quot;工人&quot;, example: &quot;The construction worker wore a hard hat.&quot; },
            { word: &quot;writer&quot;, phonetic: &quot;/ˈraɪtər/&quot;, meaning: &quot;作家&quot;, example: &quot;J.K. Rowling is a famous British writer.&quot; }
        ];

        // 应用状态
        const state = {
            allWords: [...words],
            remainingWords: [...words],
            knownWords: [],
            reviewWords: [],
            currentWord: null
        };

        // DOM元素
        const card = document.getElementById(&#x27;card&#x27;);
        const wordEl = document.getElementById(&#x27;word&#x27;);
        const phoneticEl = document.getElementById(&#x27;phonetic&#x27;);
        const meaningEl = document.getElementById(&#x27;meaning&#x27;);
        const exampleEl = document.getElementById(&#x27;example&#x27;);
        const soundBtn = document.getElementById(&#x27;sound-btn&#x27;);
        const knowBtn = document.getElementById(&#x27;know-btn&#x27;);
        const unsureBtn = document.getElementById(&#x27;unsure-btn&#x27;);
        const dontKnowBtn = document.getElementById(&#x27;dont-know-btn&#x27;);
        const reviewSection = document.getElementById(&#x27;review-section&#x27;);
        const reviewWordsContainer = document.getElementById(&#x27;review-words&#x27;);
        const reviewAllBtn = document.getElementById(&#x27;review-all-btn&#x27;);
        const continueBtn = document.getElementById(&#x27;continue-btn&#x27;);
        const remainingCount = document.getElementById(&#x27;remaining-count&#x27;);
        const knownCount = document.getElementById(&#x27;known-count&#x27;);
        const reviewCount = document.getElementById(&#x27;review-count&#x27;);
        const progressBar = document.getElementById(&#x27;progress-bar&#x27;);

        // 初始化
        function init() {
            updateStats();
            nextWord();
            
            // 事件监听
            card.addEventListener(&#x27;click&#x27;, flipCard);
            soundBtn.addEventListener(&#x27;click&#x27;, playSound);
            knowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;known&#x27;));
            unsureBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;unsure&#x27;));
            dontKnowBtn.addEventListener(&#x27;click&#x27;, () =&gt; handleResponse(&#x27;dont-know&#x27;));
            reviewAllBtn.addEventListener(&#x27;click&#x27;, reviewAll);
            continueBtn.addEventListener(&#x27;click&#x27;, hideReviewSection);
        }

        // 翻转卡片
        function flipCard() {
            card.classList.toggle(&#x27;flipped&#x27;);
        }

        // 播放发音
        function playSound() {
            if (state.currentWord) {
                // 使用浏览器内置发音API
                const utterance = new SpeechSynthesisUtterance(state.currentWord.word);
                utterance.lang = &#x27;en-GB&#x27;; // 英式英语
                speechSynthesis.speak(utterance);
            }
        }

        // 获取随机单词
        function getRandomWord() {
            if (state.remainingWords.length === 0) {
                if (state.reviewWords.length &gt; 0) {
                    showReviewSection();
                    return null;
                }
                return null; // 所有单词都学完了
            }
            
            const randomIndex = Math.floor(Math.random() * state.remainingWords.length);
            return state.remainingWords[randomIndex];
        }

        // 显示下一个单词
        function nextWord() {
            const word = getRandomWord();
            if (!word) {
                // 所有单词都学完了
                wordEl.textContent = &quot;恭喜！&quot;;
                phoneticEl.textContent = &quot;你已经学完了所有单词&quot;;
                meaningEl.textContent = &quot;&quot;;
                exampleEl.textContent = &quot;&quot;;
                return;
            }
            
            state.currentWord = word;
            wordEl.textContent = word.word;
            phoneticEl.textContent = word.phonetic;
            meaningEl.textContent = word.meaning;
            exampleEl.textContent = word.example;
            
            // 确保卡片是正面朝上
            card.classList.remove(&#x27;flipped&#x27;);
            
            updateStats();
        }

        // 处理用户响应
        function handleResponse(response) {
            if (!state.currentWord) return;
            
            const word = state.currentWord;
            
            // 从剩余单词中移除
            state.remainingWords = state.remainingWords.filter(w =&gt; w.word !== word.word);
            
            // 根据响应处理
            if (response === &#x27;known&#x27;) {
                state.knownWords.push(word);
            } else {
                // 避免重复添加
                if (!state.reviewWords.some(w =&gt; w.word === word.word)) {
                    state.reviewWords.push(word);
                }
            }
            
            nextWord();
        }

        // 显示复习部分
        function showReviewSection() {
            // 更新复习单词显示
            reviewWordsContainer.innerHTML = &#x27;&#x27;;
            state.reviewWords.forEach(word =&gt; {
                const wordEl = document.createElement(&#x27;div&#x27;);
                wordEl.className = &#x27;review-word&#x27;;
                wordEl.textContent = word.word;
                wordEl.addEventListener(&#x27;click&#x27;, () =&gt; {
                    // 点击复习单词时显示该单词
                    state.currentWord = word;
                    wordEl.textContent = word.word;
                    phoneticEl.textContent = word.phonetic;
                    meaningEl.textContent = word.meaning;
                    exampleEl.textContent = word.example;
                    card.classList.remove(&#x27;flipped&#x27;);
                    hideReviewSection();
                });
                reviewWordsContainer.appendChild(wordEl);
            });
            
            reviewSection.style.display = &#x27;block&#x27;;
        }

        // 隐藏复习部分
        function hideReviewSection() {
            reviewSection.style.display = &#x27;none&#x27;;
            // 将复习单词放回剩余单词列表
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            nextWord();
        }

        // 复习所有单词
        function reviewAll() {
            state.remainingWords = [...state.reviewWords];
            state.reviewWords = [];
            hideReviewSection();
        }

        // 更新统计数据
        function updateStats() {
            remainingCount.textContent = state.remainingWords.length;
            knownCount.textContent = state.knownWords.length;
            reviewCount.textContent = state.reviewWords.length;
            
            // 更新进度条
            const totalWords = state.allWords.length;
            const learnedWords = state.knownWords.length;
            const progress = (learnedWords / totalWords) * 100;
            progressBar.style.width = `${progress}%`;
        }

        // 初始化应用
        document.addEventListener(&#x27;DOMContentLoaded&#x27;, init);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;" loading="lazy"></iframe>
    </section>
    
    <div class="footer">共收录 25 个子页面。</div>
  </div>
</div>
</body>
</html>